Эффекты при наведении для фотографий с названиями и сопроводительным текстом.

Как реализовать интересные эффекты при наведении на изображения, так называемый 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);
}

Таким образом есть множество вариаций формы с крутыми эффектами. Как насчет, например, с фотографиями на стене, мимо которых можно прогуляться как в фотогалерее?
Получайте удовольствие от экспериментов!

Оригинал / Перевод

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

Ваш адрес email не будет опубликован. Обязательные поля помечены *

Этот сайт использует Akismet для борьбы со спамом. Узнайте, как обрабатываются ваши данные комментариев.