Как сделать hover эффект в Bootstrap 3 для изображения?

hood

24.02.2017, 18:13

6.5K

Как сделать hover эффект в Bootstrap. А именно чтобы при поднесении курсора к изображению, оно синело, и поверх него появлялась лупа. Т.е. подобно тому, как это изображено на рисунке.

Изображения:

hover.png

Комментарии: 3

Max

13.04.2017, 20:44

Здравствуйте, можно ли зафиксировать маленькую стрелку в меню при переходе в саб меню, то есть когда она теряет hover остается в том же положении c помощью css?
itchief.ru/assets/uploadify/a/0/7/a07291c27f64812270e65877a367dc63.png

Александр Мальцев

14.04.2017, 05:29

Добрый день. В этом случае вам иконку необходимо добавлять с помощью псевдоэлемента (названия классов и шрифтов приведено для примера).
Т.е. когда элемент не имеет hover эффект, то так:

.dropdown:after {
  font-family: 'Glyphicons Halflings';
  content: "\e114";
}

После того как к нему поднесли курсор и появилась подменю, то так:

.dropdown:hover:after {
  font-family: 'Glyphicons Halflings';
  content: "\e080";
}

Обычно показ dropdown меню осуществляется кодом, приведённым ниже и hover эффект при этом не исчезает:

/* показывать dropdown меню при наведении */
.dropdown:hover .dropdown-content {
  display: block; 
}

Александр Мальцев

28.02.2017, 15:33

Для создания подобного эффекта (затемнения картинки и отображения поверх неё иконки) при поднесения курсора к изображению можно организовать с помощью создания необходимой 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>

CSS-стили:

.img-hover {
  position: relative;
  display: inline-block;
  width: 300px; /* ширина блока */
  background: #0000ff; /* цвет затемнения */
}
.img-hover img {
  width: 100%;
  height: auto;
  opacity: 1;
  -webkit-transition: .3s ease-in-out;
  transition: .3s ease-in-out;
}
.img-hover:hover img {
  opacity: .5; /* уровень прозрачности */
}
.img-hover i {
  position: absolute;
  top: 50%;
  left: 50%; 
  text-align: center;
  -webkit-transform: translate(-50%, -50%);
  -moz-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  -o-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  opacity: 0;
  color: #fff; /* цвет иконки */
  font-size: 30px; /* размер иконки */
}
.img-hover:hover i {
  opacity: 1;
  z-index: 1000;
  -webkit-transition: .3s ease-in-out;
  transition: .3s ease-in-out;
}