Hover эффект при наведении на изображение

Опубликовано 21.09.2019

Эта статья поможет тем, кто хочет привлечь внимание посетителей к информации, оформленной оригинальным способом и при этом сэкономить место на сайте.

Сегодня мы рассмотрим, как сделать так, чтобы при наведении мышкой на изображение, появлялся текст с описанием объекта и ссылка для дальнейшего перехода на страницу объекта. И при этом изображение красиво съезжало вверх, вниз, влево или вправо.

Данный эффект можно реализовать несколькими строками кода, используя при этом библиотеку jQuery. Нам понадобится событие hover, а также методы stop() и animate().

Для начала подготовим несколько изображений с размерами 200х200 пикселей.

Подключим к странице библиотеку jQuery:

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>

Далее создадим HTML верстку:

<div class="div1">
  <div class="slideBox sTop">
    <img src="1.jpg" alt="" />
    <div class="block_content">
      <div class="zag">Ferrari 812</div>
      <div class="txt">The Ferrari 812 Superfast (Type F152M) is a front mid-engine, rear-wheel-drive grand tourer produced by Italian sports car manufacturer Ferrari that made its debut at the 2017 Geneva Motor Show. The 812 Superfast is the successor to the F12berlinetta.</div>
      <div><a href="#" class="link_btn">Читать далее</a></div>
    </div>
  </div>
  <div class="slideBox sTop">
    <img src="2.jpg" alt="" />
    <div class="block_content">
      <div class="zag">Audi RS6</div>
      <div class="txt">Audi RS 6 – спортивный автомобиль выпускаемый подразделением Audi Sport GmbH (ранее quattro GmbH) на платформе Audi A6. Автомобиль выпускается в двух типах кузова, седан и универсал (Avant). Существует менее мощная спортивная версия Audi S6.</div>
      <div><a href="#" class="link_btn">Читать далее</a></div>
    </div>
  </div>
  <div class="slideBox sTop">
    <img src="3.jpg" alt="" />
    <div class="block_content">
      <div class="zag">BMW X5</div>
      <div class="txt">BMW X5 - среднеразмерный кроссовер от немецкого автопроизводителя BMW. Автомобиль был представлен в 1999 году на автосалоне в Детройте. Буква «Х» означает, что автомобиль имеет полный привод, а цифра «5» - что базой послужила 5-я серия (BMW E39), однако X5 короче E39, но при этом выше и шире.</div>
      <div><a href="#" class="link_btn">Читать далее</a></div>
    </div>
  </div>
</div>

Теперь зададим css стили:

.div1 {
  width: 690px;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 20px;
  overflow: hidden;
}
.slideBox {
  width: 200px;
  height: 200px;
  position: relative;
  float: left;
  margin-right: 10px;
  margin-left: 10px;
  overflow: hidden;
  border: 5px solid #707070;
}
.slideBox img {
  position: absolute;
  z-index: 2;
  width: 200px;
  height: 200px;
  top: 0px;
  left: 0px;
}
.block_content {
  z-index: 1;
  padding: 10px;
  text-align: left;
}
.zag {
  font-size: 18px;
  margin-bottom: 10px;
}
.link_btn, .link_btn:focus, .link_btn:active {
  display: inline-block;
  background-color: #303030;
  color: #ffffff;
  border-radius: 6px;
  font-size: 14px;
  font-weight: bold;
  padding-left: 24px;
  padding-right: 24px;
  padding-top: 4px;
  padding-bottom: 4px;
  transition: 0.2s;
}
.link_btn:hover {
  background-color: #505050;
  color: #ffffff;
}
.txt {
  height: 100px;
  overflow: hidden;
  margin-bottom: 10px;
}

В css мы указали, что изображение должно иметь абсолютную позицию относительно блока .slideBox, а также иметь нулевые отступы top и left.

Теперь, чтобы заработал эффект наведения мыши добавим небольшой javascript код на нашу страницу:

$(document).ready(function(){
  $(".sTop").hover(function(){
    $(this).find("img").stop().animate({
      top: -200
    }, 500);
  }, function(){
    $(this).find("img").stop().animate({
      top: 0
    }, 500);
  });
});

Как видим из кода, событие hover делится на 2 части: наведение и уход мыши с изображения. Для того чтобы изображение съезжало вверх или вниз необходимо менять параметр top. Если же нужно смещать влево или вправо, то меняем параметр left.

top: -200 Смещаем изображение вверх на 200 пикселей.
top: 200 Смещаем изображение вниз на 200 пикселей.
left: -200 Смещаем изображение влево на 200 пикселей.
left: 200 Смещаем изображение вправо на 200 пикселей.

Данные параметры меняем с помощью анимации. Скорость анимации задаем 500 миллисекунд.

На этом все готово! Результат работы эффекта доступен на демо-странице.

Демо