Исчезать изображение портфолио при наведении, чтобы показать увеличительное стекло или знак плюс и т. Д.?

Question

В последнее время я часто видел интересный эффект наведения изображения, и мне было интересно, есть ли у кого-нибудь какие-либо советы или рекомендации о том, как лучше всего создать этот эффект?

Что я хотел бы создать, так этоэффект, так что при наведении курсора на изображение изображение исчезает и появляется увеличительное стекло или аналогичный значок. Выделяется тот факт, что при нажатии на изображение оно увеличивается и т. д.

Вот хороший примерэффекта: http://themes.mysitemyway.com/infocus/gallery/portfolio/

Любой совет или указатели будут великолепны!

Answer 1

Эффект прозрачности достигается с помощью .fadeTo()

Все, что вам нужно сделать, это поместить изображение с увеличительным стеклом под фактическую фотографию, используя позиционирование css, и постепенно уменьшить основное изображение до значения, равного 0,4

$('.hover_fade').hover(
  function() {
    $(this).fadeTo("slow", 0.4);
  },
  function() {
    $(this).fadeTo("slow", 1);
  }
);

эта первая функция запускается, когда вы наводите элемент над классом hover_fade, вторая функция - когда мышь покидает элемент