Skillbox

Текст, появляющийся при наведении курсора на картинку

Нередко заказчики просят создать на сайте эффект всплывающего текста, появляющегося при наведении курсора на картинку или рекламный баннер.  Особенно часто этот приём используется в карточках товаров интернет - магазинов: когда при наведении указателя на фото товарной позиции выскакивает всплывающий блок  с информацией о продукте, это выглядит очень эффектно.  К тому же значительно повышает конверсию сайта, позволяя посетителю быстро ознакомиться с характеристиками представленных товаров, не "проваливаясь" в карточку.

 

Помимо текста внутрь всплывающего контейнера можно поместить различные кнопки, офферы или  изображения, которые также привлекут внимание потенциальных клиентов вашего веб-ресурса.

Сам же эффект реализуется довольно просто при помощи обычного css и не требует знаний и применения javascript.

Итак, давайте приступим:

  1. Для начала создадим блок с картинкой и назовем его <block_1>, после чего внутрь этого блока поместим блок с нашим текстом и назовем его <block_2>:
<h1>Текст, появляющийся при наведении на картинку</h1>
<div class="block_1">
<div class="block_2">
<p>Очень интересный и продающий текст..</p>
</div>
</div>

2. Зададим стили для наших блоков :

<style>
body{background:rgb(243, 228, 228);text-align:center;}
.block_1{width:1050px;height:300px;overflow:hidden;position:relative;margin-left:150px;background:url(https://coderistu.ru/wp-includes/images/pumpkin.jpg);background-size:cover}
.block_2{position:absolute; visibility:hidden;left:1px;background:rgba(0, 0, 0, 0.4392156862745098);font-size:20px;color: white;width: 1050px;height: 300px;top:160px}
.block_2 p {padding: 110px 0px;text-align: center;}
.block_1:hover .block_2{visibility:visible;transition:1s;-webkit-transition:1s;transform:translatey(-160px);-webkit-transform:translatey(-160px)}
.block_1:hover{filter:sepia(50%);-webkit-filter:sepia(60%);transition:0.6s;-webkit-transition:0.6s;}
</style>
Эффект работает следующим образом: блок с текстом, который мы обозначили как .block_2, изначально скрывается при помощи  свойства visibility:hidden. При наведении курсора на блок с картинкой мы делаем его видимым с помощью свойства visibility:visible, а его плавное перемещение задаем свойствами transition:1s и transform:translatey(-160px).

ДЕМО

На этом все. Надеюсь, что статья была вам полезной!

css

Добавить комментарий

Ваш e-mail не будет опубликован.