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

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

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

  1. Max
    Max
    2017-04-13 20:44:19
    Здравствуйте, можно ли зафиксировать маленькую стрелку в меню при переходе в саб меню, то есть когда она теряет hover остается в том же положении c помощью css?
    itchief.ru/assets/uploadify/a/0/7/a07291c27f64812270e65877a367dc63.png
  1. Александр Мальцев
    Александр Мальцев
    2017-04-14 05:29:34
    Добрый день. В этом случае вам иконку необходимо добавлять с помощью псевдоэлемента (названия классов и шрифтов приведено для примера).
    Т.е. когда элемент не имеет 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; 
    }
    
  • Александр Мальцев
    Александр Мальцев
    2017-02-28 15:33:55
    Для создания подобного эффекта (затемнения картинки и отображения поверх неё иконки) при поднесения курсора к изображению можно организовать с помощью создания необходимой 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;
    }