Эффект названий изображений, которые выскальзывают при наведении курсора мыши на картинку, можно создать с помощью набора взаимосвязанных элементов div. Но в данном уроке мы будем использовать структуру HTML5 для изображения с названием и CSS3 для задания стилей.
Зачем? Такое решение может помочь сохранить пространство в шаблоне. Сами по себе названия могут иметь отвлекающий от основной линии дизайн, поэтому их лучше выводить только тогда, когда они нужны. В любом случае, решение, предложенное в данном уроке, является простой демонстрацией возможностей. Будете ли вы его использовать, зависит от вас.
Структура HTML5
В ней нет ничего более, чем простая разметка для изображения с названием.
<figure>
<img src="yay.jpg" alt="">
<figcaption>
yay!!!
</figcaption>
</figure>
Структура CSS
Элемент figure содержит все остальное и является основным строительным блоком. Сущность нашей концепции начинает проявляться здесь. Элемент figure нуждается в свойстве position: relative; , что дает нам возможность абсолютно позиционировать название точно в том месте, где нам нужно. Также требуется свойство overflow: hidden; , чтобы выскальзывающее название скрывалось при выходе за границы нашего элемента figure.
figure {
display: block;
position: relative;
overflow: hidden;
}
figcaption {
position: absolute;
background: rgba(0,0,0,0.75);
color: white;
padding: 10px 20px;
}
Включаем выскальзывание
Нам нужно скрывать название, чтобы мы могли выводить его при наведении курсора мыши на изображение. Будем позиционировать название немного позади нижнего левого угла и скроем его с помощью установки прозрачности. Когда курсор мыши окажется над изображением, название будет выскальзывать на свое место и становиться видимым. Для выскальзывания будем использовать transition.
figcaption {
position: absolute;
background: rgba(0,0,0,0.75);
color: white;
padding: 10px 20px;
opacity: 0;
bottom: 0;
left: -30%;
-webkit-transition: all 0.6s ease;
-moz-transition: all 0.6s ease;
-o-transition: all 0.6s ease;
}
figure:hover figcaption {
opacity: 1;
left: 0;
}
Опции
На демонстрационной странице положение и направление выскальзывания названия различные для каждого изображения. Такое поведение реализовано с помощью добавления имени класса к изображению и позиционирования различными способами, в зависимости от класса.
<figure class="cap-top">
.cap-left figcaption { bottom: 0; left: -30%; }
.cap-left:hover figcaption { left: 0; }
.cap-right figcaption { bottom: 0; right: -30%; }
.cap-right:hover figcaption { right: 0; }
.cap-top figcaption { left: 0; top: -30%; }
.cap-top:hover figcaption { top: 0; }
.cap-bot figcaption { left: 0; bottom: -30%;}
.cap-bot:hover figcaption { bottom: 0; }
А как посетитель узнает, что там что-то есть?
Для того, чтобы посетитель мог иметь возможность видеть ваши великолепные и остроумные подписи под изображениями, надо поставить индикатор их присутствия. Мы будем использовать знак вопроса. Чтобы избежать избыточной разметки будем генерировать содержание в форме псевдо элемента для изображения.
figure:before {
content: "?";
position: absolute;
background: rgba(255,255,255,0.75);
color: black;
width: 24px;
height: 24px;
-webkit-border-radius: 12px;
-moz-border-radius: 12px;
border-radius: 12px;
text-align: center;
font-size: 14px;
line-height: 24px;
/* Только Fx 4 поддерживает трансформации для псевдо элементов... */
-webkit-transition: all 0.6s ease;
-moz-transition: all 0.6s ease;
-o-transition: all 0.6s ease;
opacity: 0.75;
}
figure:hover:before {
opacity: 0;
}
Обратите внимание, что никаких свойств CSS позиционирования псевдо элемента, кроме position: absolute;, нет. Позиционирование зависит от установленного класса опции. Возможно вы захотите размещать знак вопроса названии. Можно сделать так:
.cap-left:before { bottom: 10px; left: 10px; }
Готово!