Сегодня мы рассмотрим, как создавать простые, но стильный эффекты, которые появятся при наведении на изображения в виде подписей. Идея заключается в том, что мы будем использовать сетку с изображениями, при наведении на которые появится подпись названия и автора, а также кнопка ссылки. Для некоторых эффектов будем использовать 3d-трансформации. Наша цель — использовать тонкие эффекты, которые при этом смогли бы оставить неплохое визуальное впечатление. 

Демо         Скачать исходные файлы

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

Изображения, которые мы использовали, принадлежат Jacob Cummings.

Давайте приступим!

Разметка

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

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

Класс для каждого эффекта будет добавлен в список — 1 пример будет иметь “cs-style-1″, 2 - “cs-style-2″ и так далее. Таким образом мы будем определять влияние стилей на соответствующий пример.

Но сначала давайте определим общие стили для всех эффектов.

CSS

Обратите внимание, что в Сss вы не найдете никаких вендерных префиксов  - вы сможете найти их в исходных файлах к этому уроку.

Общие стили для всех элементов будут иметь следующий вид. Во-первых, определяем стили для сетки и для элементов списка, которые включают 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;
}

Применение  к пунктам списка значения display: inline-block позволит нам центрировать их относительно родительского элемента с помощью text-align.

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

.grid figure {

    margin: 0;
    position: relative;
}

Максимальную ширину для изображения устанавливаем на  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;
}

Для тега span, который будет содержать имя автора, используя псевдо-класс :before, добавляем «by». Конечно, это можно сделать и в  HTML, но  такой метод обеспечит возможность редактирования подписи. Например, вы без проблем сможете изменить «by», на «Автор», «дизайнер» или что-нибудь еще.

В конце css определим стили для девайсов с небольшими экранами.

@media screen and (max-width: 31.5em) {

    .grid {
        padding: 10px 10px 100px 10px;
    }
    .grid li {
        width: 100%;
        min-width: 300px;
    }
}

А теперь приступим к эффектам.

Эффект 1

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

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

.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-индекса на 10, чтобы изображение размещалось в верхней части подписи.

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

Похожий эффект на предыдущий, но в этот раз, будем убирать все части, которые выступают при перемещении изображения вверх.

Для 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,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-переходы работали и для других элементов, наш дочерний элемент должен иметь следующие transform-style.

.cs-style-4 figure {

    transform-style: preserve-3d;
}

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

.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.  Это позволит сделать видимость, как будто он повернут к нам. Для «hover out» выставляем переход, который будет работать по  принципу, описанному в предыдущем примере.

.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;
}

При наведении мы повернем его на 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

Эффект очень похож на предыдущий. Нов  этом случае изображение и текст  будем позиционировать в другом месте.

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

.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-индекса.

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

.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, увеличим высоту и для box shadow устанавливаем 10 px.

.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;
}

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

.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;
}

Вот и все! Надеемся, вам понравился этот урок.

Демо         Скачать исходные файлы

Автор - MARY LOU

Перевод — Дежурка