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

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

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

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