Lecaw

Учимся создавать Web-сайты

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

June 20, 2013
CSS
343hits

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

ДЕМО Исходные файлы

 

В нашей демонстрационной странице мы использовали изображения от Jacob Cummings.

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="#">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;
}

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

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

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

.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 исчезал и перемещался немного вправо и вниз, создавая иллюзию 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

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

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

.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, так что изображение будет находиться поверх элемента caprion.

Для 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

Другой подход к Effect 2, с использованием 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;
}

Заголовок будет иметь 100% размер элемента 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;
}

ДЕМО Исходные файлы

 

Дополнительная информация

Влерий Аликин - веб-разработчик & дизайнер. Соучредитель и член команды Lecaw.

Эл. почта
RATTING:
(0 голосов)

Оставить комментарий