Как реализовать интересные эффекты при наведении на изображения, так называемый hover-Effekt? В HTML5 для изображений и связанного с ними сопровождающего текста теперь можно создавать интересные эффекты.
Но обратите внимание, что эти методы работают только при использовании современных броузеров.
Для всех визуальных эффектов используется структура HTML5. В дополнение к “figure-Element” один класс “.hov” помещает текст в “p-Element“. Это позволяет реализовать эффекты для каждого изображения в CSS и анимировать текст, независимо от”figcaption“. И “figcaption-Element” может быть использован для дополнительных эффектов, таких как красивая рамка.
<figure class="hov1">
<img src="bilder660/Strand_bei_Portsalon.jpg" width="660" height="455"
alt="Menschenleerer Strand">
<figcaption>
<h4>Irland <span>2008</span></h4>
<p>
Menschenleerer Strand bei Portsalon
auf der Halbinsel Fanad in Irland
</p>
<a href="../fotogalerie-Reisen/Irland2008"
title="Sprung zu den Reisebildern aus Irland aus dem Jahr 2008">
Reisebildern aus Irland
</a>
</figcaption>
</figure>
Затем следуют несколько базовых настроек для всех визуальных эффектов в CSS.
- Сначала расположим элемент “figure-Element“и всё, что находится в нём выравнивается по центру и текст отображается белым цветом и в верхнем регистре.
- Изображение полупрозрачно.
- Для содержимого “figcaption-Element” и ссылок выбран полный размер изображения .
- Кроме того, текст ссылки скрыт.
- В главе “H4” текст расположен по центру изображения и слегка смещен от верхней кромки, а также размер шрифта и тени вокруг заголовка фиксированы.
- И, наконец, “р“-элемент для сопроводительного текста по центру, но только с максимальной шириной 200 пикселей. И напоследок установлены цвет и размер шрифта, а также расстояние между отдельными буквами.
figure {
position: relative;
overflow: hidden;
width: 41.25em;
margin: 1em auto;
text-align: center;
color: #fff;
text-transform: uppercase;
border: 5px solid #eee;
box-shadow: 1px 1px 5px 2px #777;
}
figure img {
opacity: .5;
}
figcaption,
figure a {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
figure a {
z-index: 10;
text-indent: 100%;
white-space: nowrap;
overflow: hidden;
}
figure h4 {
margin: 0 auto;
padding: 25% 3% 0 0;
font-size: 2em;
font-weight: 800;
text-shadow: 2px 4px 2px #101010, 1px 1px 0 #505050;
}
figure h4 span {
font-weight: 300;
}
figure p {
max-width: 200px;
margin: 0 auto;
letter-spacing: .06em;
font-size: .8em;
color: #fff;
}
Без эффектов, т.е. без дополнительного указания класса в “figure-Element“, изображение с заголовком и сопроводительным текстом будет выглядеть, как показано ниже.
Теперь добавим некоторые интересные эффекты.
В следующем примере, картинка отображается с размером 125%. При наведении мыши, изображение с помощью “hover-Effekt” сжимается за полсекунды до нормального размера, и остаётся только 10% прозрачности, в то же время отображается рамка и текст с изначальных 150% сбрасывается на 100% .
CSS для этого эффекта состоит в следующем и говорит сам за себя:
figure.hov1 img {
transition: .5s;
transform: scale(1.4);
}
figure.hov1:hover img {
opacity: .9;
transform: scale(1.15);
}
figure.hov1 figcaption:before {
position: absolute;
top: 30px;
right: 30px;
bottom: 30px;
left: 30px;
border: 1px solid #fff;
content: '';
transform: scale(1.1);
}
figure.hov1 p {
transform: scale(1.5);
}
figure.hov1 figcaption:before,
figure.hov1 p {
opacity: 0;
transition: .5s;
}
figure.hov1:hover figcaption:before,
figure.hov1:hover p {
opacity: 1;
transform: scale(1);
}
Во втором примере, изображение сдвигается справа налево, панорамируясь. На экране рамка имеет закругленные углы и внутреннюю тень. Текст выравнивается по правому краю и сдвигается с правой стороны к середине.
CSS для этого эффекта не сильно отличается от первого примера:
figure.hov11 img {
width: calc(100% + 200px);
transform: translate3d(-200px,0,0);
transition: opacity .5s, transform 3s;
}
figure.hov11:hover img {
opacity: .9;
transform: translate3d(0,0,0);
}
figure.hov11 figcaption:before {
position: absolute;
top: 30px;
right: 30px;
bottom: 30px;
left: 30px;
border: 1px solid #fff;
border-radius: 50px;
box-shadow: inset 0 0 10px 5px rgba(0, 0, 0, 0.5);
content: '';
transform: scale(1.1);
}
figure.hov11 figcaption:before,
figure.hov11 p {
opacity: 0;
transition: .5s;
}
figure.hov11 p {
border-right: 1px solid #fff;
text-align: right;
transform: translate3d(100%,0,0) scale(1.2);
}
figure.hov11:hover figcaption:before,
figure.hov11:hover p {
opacity: 1;
transform: translate3d(0,0,0) scale(1);
}
В третьем примере, размер изображения остается тем же самым. При наведении указателем мыши, текст отображается с полосой. Текст и полоса поднимаются на 20px вверх, одновременно с чем описание движется вниз. Кроме того, рамка, созданная линиями в центре выделяет главный объект фотографии.
CSS для этого примера:
figure.hov2 img {
transition: .5s;
}
figure.hov2:hover img {
opacity: .9;
}
figure.hov2 figcaption:before {
border-top: 1px solid #fff;
border-bottom: 1px solid #fff;
transform: scale(0,1);
}
figure.hov2 figcaption:after {
border-right: 1px solid #fff;
border-left: 1px solid #fff;
transform: scale(1,0);
}
figure.hov2 figcaption:before,
figure.hov2 figcaption:after {
position: absolute;
top: 240px;
right: 30px;
bottom: 20px;
left: 30px;
content: '';
opacity: 0;
transition: .5s;
}
figure.hov2 h4 {
padding-top: 10%;
transition: .5s;
transform: translate3d(0,-20px,0);
}
figure.hov2 p {
max-width: 350px;
text-transform: none;
opacity: 0;
transition: .5s;
transform: translate3d(0,20px,0);
}
figure.hov2 p:after {
position: absolute;
top: -35%;
left: 0;
width: 100%;
height: .25em;
background: #fff;
content: '';
}
figure.hov2:hover figcaption:before,
figure.hov2:hover figcaption:after {
opacity: 1;
transform: scale(1);
}
figure.hov2:hover h4,
figure.hov2:hover p {
opacity: 1;
transform: translate3d(0,0,0);
}
В последнем примере, изображение и название скользят вниз. Одновременно появляется рамка, чьи линии движутся сверху и справа, и отображается текст.
Особенностью этого примера является transform-origin: 0 0, при котором линии протягивается от левого верхнего края. При transform-origin: 100% 0 они появятся в верхнем правом и при transform-origin: 100% 100% они будут в правом нижнем углу.
Эти данные означают “установки центра вращения”. Значения этих двух данных: первое значение X или горизонтальная ось, а 0 слева. Второе значение является вертикальной или Y-ось и 0 сверху.
В этом примере CSS выглядит следующим образом:
figure.hov3 {
height: 26.6em;
}
figure.hov3 figcaption:before,
figure.hov3 figcaption:after {
position: absolute;
content: '';
opacity: 0;
}
figure.hov3 figcaption:before {
top: 50px;
right: 30px;
bottom: 50px;
left: 30px;
border-top: 1px solid #fff;
border-bottom: 1px solid #fff;
transform: scale(0,1);
transform-origin: 0 0;
}
figure.hov3 figcaption:after {
top: 30px;
right: 50px;
bottom: 30px;
left: 50px;
border-right: 1px solid #fff;
border-left: 1px solid #fff;
transform: scale(1,0);
transform-origin: 0 0;
}
figure.hov3 p {
position: relative;
overflow: hidden;
max-width: 380px;
opacity: 0;
}
figure.hov3 p:after {
position: absolute;
bottom: 30px;
left: 0;
top: 0;
width: 100%;
height: .2em;
background: #fff;
content: '';
transition: transform .5s;
transform: translate3d(-100%,0,0);
}
figure.hov3 img,
figure.hov3 h4 {
transform: translate3d(0,-30px,0);
}
figure.hov3 img,
figure.hov3 figcaption:before,
figure.hov3 figcaption:after,
figure.hov3 p,
figure.hov3 h4 {
transition: 1s;
}
figure.hov3:hover img {
opacity: .9;
transform: translate3d(0,0,0);
}
figure.hov3:hover figcaption:before,
figure.hov3:hover figcaption:after {
opacity: 1;
transform: scale(1);
}
figure.hov3:hover h4,
figure.hov3:hover p,
figure.hov3:hover p:after {
opacity: 1;
transform: translate3d(0,0,0);
}
Таким образом есть множество вариаций формы с крутыми эффектами. Как насчет, например, с фотографиями на стене, мимо которых можно прогуляться как в фотогалерее?
Получайте удовольствие от экспериментов!