Как реализовать такой hover эффект?

Question

[TheGoodLife4]

Подскажите как реализовать данный hover эффект? Чтобы после наведения на картинку появлялись ссылки на соц сети.

Answer 1

[iBird Rose]

ставишь блок с соц сетями на это место абсолютом к примеру. даешь блоку opacity: 0;
при ховере даешь opacity: 1;
или visibility: hidden; и visibility: visible;

Answer 2

[Ankhena]

<figure>
<img>
<div class="social"></div>
</figure>

figure {
position: relative;

}
.social {
position: absolute;
задаем нужное положение
на выбор: display:none; opacity:0 или visibility: hidden (могу быть еще варианты позиционирования куда-нибудь за край блока или экрана, но их опустим)

}

img:hover + .social {
возвращаем display, opacity или visibility
}

Также необходимо согласовать размеры картинки и figure.

Альтернативный вариант, применять hover к figure, а не к картинке figure: hover .social {}.

Answer 3

[twobomb]

Ну вот , только иконки добавь норм, стили подправь и т.д.

Answer 4

[Александр Моргунов]

Можно сделать интереснее. Для тега, в котором лежат иконки указать свойство display: none. А вот наведение повесить на тег с изображением с помощью jQuery (mouseenter, mouseleave) с применение анимации к блоку с иконками fadeIn и fadeOut.