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

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

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

  1. Max
    Max
    13.04.2017, 20:44
    Здравствуйте, можно ли зафиксировать маленькую стрелку в меню при переходе в саб меню, то есть когда она теряет hover остается в том же положении c помощью css?
    itchief.ru/assets/uploadify/a/0/7/a07291c27f64812270e65877a367dc63.png
    1. Александр Мальцев
      Александр Мальцев
      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; 
      }
      
  2. Александр Мальцев
    Александр Мальцев
    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;
    }