Наведите курсор на изображение, чтобы показать значок?Используя непрозрачность

Question

Я ищу хороший учебник по этому эффекту: http://chrismahon.com/themes/wook/portfolio/

Когда вы наводите курсор мыши на изображение портфолио, непрозрачность меняется и появляется значок.

Если бы кто-то мог помочь, это было бы здорово, так как я не очень хочу украсть код.

Спасибо

Answer 1

Не глядя на код: это, скорее всего, непрозрачность (CSS), поместите только альфа-прозрачные PNG.Я бы сделал что-то вроде этого:

HTML

<a href="link">
<img src="thumbnail.gif">
<span><img src="hover-icon.png"></span>
</a>

CSS:

a {
  display: block;
  position: relative;
}

a span {
   display: none;
   position: absolute;
   top: 0;
   left: 0;
}

a:hover span {
   display: block;
}

Изменение с переходом непрозрачности (для текущих браузеров):

a span {
    transition: opacity .5s;
    -webkit-transition: opacity .5s;
    -moz-transition: opacity .5s;
    -o-transition: opacity .5s;
    opacity: 0;

    display: block;
    position: relative;
}

a:hover span {
   opacity: 1;
   position: absolute;
   top: 0;
   left: 0;
}

Answer 2

я расширяю ответ ротора

.imageLink {
   display: block;
   position: relative;
}

.imageLink .zoomIcon {
   display: hidden;
   position: absolute;
   top: 0;
   left: 0;
}

$(".imageLink").hover(function(){
    $(this).children(".zoomIcon").fadeIn();
},function(){
    $(this).children(".zoomIcon").fadeOut();
});