CSS Эффекты при наведении элемента Caption

Сегодня я хотел бы показать вам, как создать несколько стильных эффектов при наведении для элемента caption. Идея состоит в том, чтобы создать сетку и применить к ней различные эффекты при наведении, которые будут содержать заголовок, автора и кнопку. Для некоторых эффектов, будем использовать 3D transforms.

Сложность

HTML разметка

Структура нашей сетки будет состоять из неупорядоченного списка, а каждый пункт списка будет иметь элемент figure. В элементе figure будут находиться изображения, а также тег figcaption с текстом и ссылками:

<ul class="grid cs-style-1">
    <li>
        <figure>
            <img src="/images/1.png" alt="img01">
            <figcaption>
                <h3>Camera</h3>
                <span>Jacob Cummings</span>
                <a href="http://dribbble.com/shots/1115632-Camera">Take a look</a>
            </figcaption>
        </figure>
    </li>
    <li>
        <figure>
            <!-- ... -->
        </figure>
    </li>
    <!-- ... -->
</ul>

Это стандартная структура для всех css эффектов сетки. Обратите внимание, что для эффекта №4 у нас будет дополнительный контейнер оболочки изображения. Класс для каждого отдельного эффекта будет добавлен в список, так пример 1 будет иметь класс cs-style-1, пример 2 будет иметь класс cs-style-2 и так далее. Вот как мы определим влияние стилей для каждого отдельного примера.

CSS

Общий стиль для всех элементов figure. Во-первых, мы определим стили для сетки и списка элементов, которые будут служить в качестве контейнеров figure:

.grid {
    padding: 20px 20px 100px 20px;
    max-width: 1300px;
    margin: 0 auto;
    list-style: none;
    text-align: center;
}
 
.grid li {
    display: inline-block;
    width: 440px;
    margin: 0;
    padding: 20px;
    text-align: left;
    position: relative;
}

Давайте сбросим все стили элемента figure и установим относительную позицию. Элемент figcaption будет позиционироваться абсолютно, поэтому мы должны убедиться, что он будет находиться внутри элемента figure:

.grid figure {
    margin: 0;
    position: relative;
}

Изображение будет иметь свойство max-width: 100%, что будет очень кстати, когда мы определим медиа запросы, для изменения размеров элементов списка:

.grid figure img {
    max-width: 100%;
    display: block;
    position: relative;
}

По умолчанию figcaption будет расположен в верхнем левом углу. Мы не будем задавать для него ширину и высоту, мы сделаем это в отдельном стиле:

.grid figcaption {
    position: absolute;
    top: 0;
    left: 0;
    padding: 20px;
    background: #2c3f52;
    color: #ed4e6e;
}

Наконец, давайте зададим стили для текстовых элементов и ссылок:

.grid figcaption h3 {
    margin: 0;
    padding: 0;
    color: #fff;
}
 
.grid figcaption span:before {
    content: 'by ';
}
 
.grid figcaption a {
    text-align: center;
    padding: 5px 10px;
    border-radius: 2px;
    display: inline-block;
    background: #ed4e6e;
    color: #fff;
}

Мы добавим текст “by” в тег span, который содержит имя автора используя псевдо-класс :before. Конечно, вы можете добавить это и в HTML, но тогда не сможете его изменить, например, вписать “made by” или “Designer”:.

В конце CSS кода, добавим медиа запросы для мобильных устройств.

@media screen and (max-width: 31.5em) {
    .grid {
        padding: 10px 10px 100px 10px;
    }
    .grid li {
        width: 100%;
        min-width: 300px;
    }
}

Эффект 1

caption hover

Давайте начнем с очень простого эффекта. Нам нужно чтобы элемент caption исчезал и перемещался немного вправо и вниз, создавая иллюзию 3D слоя, который выходит за границы блока.

Для этого в первую очередь необходимо установить ширину и высоту figcaption, а также начальную непрозрачность со значением 0:

.cs-style-1 figcaption {
    height: 100%;
    width: 100%;
    opacity: 0;
    text-align: center;
    backface-visibility: hidden;
    transition: transform 0.3s, opacity 0.3s;
}

Мы также добавили переходы и установили свойство backface-visibility: hidden, чтобы избежать скачков текста в конце перехода.

При наведении (или нажатии) мы сменим значение непрозрачности до 1:

.no-touch .cs-style-1 figure:hover figcaption,
.cs-style-1 figure.cs-hover figcaption {
    opacity: 1;
    transform: translate(15px, 15px);
}

Кроме того, мы позиционируем элементы текста:

.cs-style-1 figcaption h3 {
    margin-top: 70px;
}
 
.cs-style-1 figcaption span {
    display: block;
}
 
.cs-style-1 figcaption a {
    margin-top: 30px;
}

Эффект 2

caption при наведении

В этом эффекте мы переместим изображение вверх и раскроем под ним элемент figcaption.

Итак, давайте добавим переход для изображения и заставим его двигаться вверх при наведении:

.cs-style-2 figure img {
    z-index: 10;
    transition: transform 0.4s;
}
 
.no-touch .cs-style-2 figure:hover img,
.cs-style-2 figure.cs-hover img {
    transform: translateY(-90px);
}

Мы установили z-index со значением 10, так что изображение будет находиться поверх элемента caption.

Для figcaption зададим фиксированную высоту и ширину в 100%. Мы разместим его в нижней части figure:

.cs-style-2 figcaption {
    height: 90px;
    width: 100%;
    top: auto;
    bottom: 0;
}

Также установим кнопку с правой стороны:

.cs-style-2 figcaption a {
    position: absolute;
    right: 20px;
    top: 30px;
}

Эффект 3

В этом примере, мы немного поменяем переход предыдущего примера, с использованием overflow: hidden, для перемещения изображения. В результате получится как будто текст слегка толкает изображение вверх.

Во-первых, нам нужно установить для элемента figure свойство overflow: hidden.

.cs-style-3 figure {
    overflow: hidden;
}

Добавим переход к изображению и при наведении мы переместим его на 50px вверх:

.cs-style-3 figure img {
    transition: transform 0.4s;
}
 
.no-touch .cs-style-3 figure:hover img,
.cs-style-3 figure.cs-hover img {
    transform: translateY(-50px);
}

Figcaption будет немного выше, чем в предыдущем примере, переместим его за границы элемента figure. Давайте также добавим переход и непрозрачность:

.cs-style-3 figcaption {
    height: 100px;
    width: 100%;
    top: auto;
    bottom: 0;
    opacity: 0;
    transform: translateY(100%);
    transition: transform 0.4s, opacity 0.1s 0.3s;
}

При наведении нужно изменить значение непрозрачности до 1. Обратите внимание, как мы добавили два перехода. Один для нормального состояния и один для наведения. Переход будет применяться при наведении, нам нужно, чтобы непрозрачность менялась очень быстро, занимая 0,4 секунды для преобразования. Когда мы уберем курсор с элемента, значение непрозрачности изменится до 0, с задержкой в 0,3 секунды. Это заставит эффект выглядеть последовательным и естественным.

.no-touch .cs-style-3 figure:hover figcaption, .cs-style-3 figure.cs-hover figcaption { opacity: 1; transform: translateY(0px); transition: transform 0.4s, opacity 0.1s; }

Ну и добавим кнопку:

.cs-style-3 figcaption a {
    position: absolute;
    bottom: 20px;
    right: 20px;
}

Эффект 4

В следующем примере будем использовать некоторые 3D примочки. Цель состоит в том, чтобы перевернуть подпись с левой стороны и переместить изображении вправо.

Мы будем использовать элемент списка в качестве контейнера с перспективой, поэтому мы можем поэкспериментировать с 3D-преобразованиями:

.cs-style-4 li {
    perspective: 1700px;
    perspective-origin: 0 50%;
}

Дочерние элементы должны иметь такой же стиль преобразования как и родительский элемент, если мы хотим, чтобы 3D-transforms работали и на других элементах:

.cs-style-4 figure {
    transform-style: preserve-3d;
}

Как упоминалось ранее, этот пример будет иметь другую оболочку для изображения, зачем нам это? Ну, нам нужно добавить overflow: hidden для изображения родителя, так как мы не хотим, чтобы при движении, изображение выходило за рамки контейнера. Конечно мы могли бы добавить overflow: hidden для элемента figure, но тогда мы не увидим красивый 3D эффект заголовка.

.cs-style-4 figure > div {
    overflow: hidden;
}

Переместим изображение при наведении:

.cs-style-4 figure img {
    transition: transform 0.4s;
}
 
.no-touch .cs-style-4 figure:hover img,
.cs-style-4 figure.cs-hover img {
    transform: translateX(25%);
}

Figcaption будет иметь ширину равной, половине ширины элемента figure, установим первоначальную непрозрачность до 0. Теперь, давайте повернем на 90 градусов по оси Y. Давайте установим переход для "наведения из элемента", который будет работать по такому же принципу, как описано в предыдущем примере:

.cs-style-4 figcaption {
    height: 100%;
    width: 50%;
    opacity: 0;
    backface-visibility: hidden;
    transform-origin: 0 0;
    transform: rotateY(-90deg);
    transition: transform 0.4s, opacity 0.1s 0.3s;
}

При наведении мы заставим элемент figcaption исчезнуть и повернем его до 0 градусов, точно также как перевернуть страницу книги в левую сторону:

.no-touch .cs-style-4 figure:hover figcaption,
.cs-style-4 figure.cs-hover figcaption {
    opacity: 1;
    transform: rotateY(0deg);
    transition: transform 0.4s, opacity 0.1s;
}

Маленькая кнопка:

.cs-style-4 figcaption a {
    position: absolute;
    bottom: 20px;
    right: 20px;
}

Эффект 5

В этом эффекте изображение будет сужаться, за которым будет находиться заголовок.

Давайте установим изображение поверх заголовка и добавим переход для преобразования:

.cs-style-5 figure img {
    z-index: 10;
    transition: transform 0.4s;
}

При наведении, мы будем масштабировать изображение:

.no-touch .cs-style-5 figure:hover img,
.cs-style-5 figure.cs-hover img {
    transform: scale(0.4);
}

Надпись изначально будет масштабироваться до 0,7 и постепенно исчезать:

.cs-style-5 figcaption {
    height: 100%;
    width: 100%;
    opacity: 0;
    transform: scale(0.7);
    backface-visibility: hidden;
    transition: transform 0.4s, opacity 0.4s;
}

.no-touch .cs-style-5 figure:hover figcaption,
.cs-style-5 figure.cs-hover figcaption {
    transform: scale(1);
    opacity: 1;
}

Ну и конечно небольшая кнопка в углу:

.cs-style-5 figure a { position: absolute; bottom: 20px; right: 20px; }

Эффект 6

Этот эффект является разновидностью 5 эффекта. Есть много возможностей, чтобы поиграть с такого рода эффектом, использовать позиционирование изображения в другом месте и отображать больше текста. Этот эффект будет позиционировать текст и изображение в другой точке.

Итак, давайте еще раз сделаем тоже самое для изображения, перемещаем при наведении:

.cs-style-6 figure img {
    z-index: 10;
    transition: transform 0.4s;
}
 
.no-touch .cs-style-6 figure:hover img,
.cs-style-6 figure.cs-hover img {
    transform: translateY(-50px) scale(0.5);
}

На этот раз для заголовка не будет переходов:

.cs-style-6 figcaption {
    height: 100%;
    width: 100%;
}

Определим позицию для текстовых элементов:

.cs-style-6 figcaption h3 {
    margin-top: 60%;
}
 
.cs-style-6 figcaption a {
    position: absolute;
    bottom: 20px;
    right: 20px;
}

Эффект 7

В последнем эффекте заголовок будет "увеличиваться" под изображением.

Так как первые элементы будут перекрывать другие элементы списка, мы должны убедиться, что z-index установлен правильно (в обратном порядке):

.cs-style-7 li:first-child { z-index: 6; }
.cs-style-7 li:nth-child(2) { z-index: 5; }
.cs-style-7 li:nth-child(3) { z-index: 4; }
.cs-style-7 li:nth-child(4) { z-index: 3; }
.cs-style-7 li:nth-child(5) { z-index: 2; }
.cs-style-7 li:nth-child(6) { z-index: 1; }

Как и в предыдущих примерах, нам нужно чтобы изображение находилось поверх заголовка:

.cs-style-7 figure img {
    z-index: 10;
}

Заголовок будет полностью перекрывать элемент figure, установим переход непрозрачности, высоту и тень. Почему именно box-shadow? Мы можем легко использовать box-shadow для создания рамки вокруг заголовка:

.cs-style-7 figcaption {
    height: 100%;
    width: 100%;
    opacity: 0;
    backface-visibility: hidden;
    box-shadow: 0 0 0 0px #2c3f52;
    transition: opacity 0.3s, height 0.3s, box-shadow 0.3s;
}

При наведении мы установим значение непрозрачности до 1 и увеличим высоту:

.no-touch .cs-style-7 figure:hover figcaption,
.cs-style-7 figure.cs-hover figcaption {
    opacity: 1;
    height: 130%;
    box-shadow: 0 0 0 10px #2c3f52;
}

Нам нужно чтобы текстовые элементы появились только после того как мы анимировали высоту заголовка, но когда мы убираем курсор с изображения, элементы мгновенно исчезнут. Установим задержку в 0 секунд для нормального состояния.

.cs-style-7 figcaption h3 {
    margin-top: 86%;
}
 
.cs-style-7 figcaption h3,
.cs-style-7 figcaption span,
.cs-style-7 figcaption a {
    opacity: 0;
    transition: opacity 0s;
}
 
.cs-style-7 figcaption a {
    position: absolute;
    bottom: 20px;
    right: 20px;
}

При наведении мы сделаем чтобы все элементы появились с задержкой:

.no-touch .cs-style-7 figure:hover figcaption h3,
.no-touch .cs-style-7 figure:hover figcaption span,
.no-touch .cs-style-7 figure:hover figcaption a,
.cs-style-7 figure.cs-hover figcaption h3,
.cs-style-7 figure.cs-hover figcaption span,
.cs-style-7 figure.cs-hover figcaption a {
    transition: opacity 0.3s 0.2s;
    opacity: 1;
}
ДЕМО СКАЧАТЬ

 

Перевод статьи Caption Hover Effects

Тэги: transitionanimatetransform

Вход

Уважаемый пользователь! Мы обнаружили, что вы используете AdBlock и вынуждены скрыть часть материалов на нашем сайте. Siteacademy существует и развивается за счет доходов от рекламы. Просим внести наш сайт в список исключений или отключить Блокировщик рекламы на нашем сайте.