Как сделать hover эффект в Bootstrap 3 для изображения?
Как сделать hover эффект в Bootstrap. А именно чтобы при поднесении курсора к изображению, оно синело, и поверх него появлялась лупа. Т.е. подобно тому, как это изображено на рисунке.
Добрый день. В этом случае вам иконку необходимо добавлять с помощью псевдоэлемента (названия классов и шрифтов приведено для примера).
Т.е. когда элемент не имеет hover эффект, то так:
Для создания подобного эффекта (затемнения картинки и отображения поверх неё иконки) при поднесения курсора к изображению можно организовать с помощью создания необходимой HTML разметки и стилей CSS.
HTML-разметка:
<!-- Первый блок -->
<div class="img-hover">
<a href="#">
<!-- glyphicon-search - иконка Glyphicon -->
<i class="glyphicon glyphicon-search"></i>
<!-- Изображение -->
<img src="img/1.jpg">
</a>
</div>
<!-- Второй блок -->
<div class="img-hover">
<a href="#">
<i class="glyphicon glyphicon-search"></i>
<img src="img/2.jpg">
</a>
</div>
itchief.ru/assets/uploadify/a/0/7/a07291c27f64812270e65877a367dc63.png
Т.е. когда элемент не имеет hover эффект, то так:
После того как к нему поднесли курсор и появилась подменю, то так:
Обычно показ dropdown меню осуществляется кодом, приведённым ниже и hover эффект при этом не исчезает:
HTML-разметка:
CSS-стили: