DataLife Engine > Версия для печати > Эффекты при наведении в виде подписей

27.09.2013
Datalife Engine

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

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

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

Разметка

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

Это базовый шаблон структуры для всех примеров сетки. Учтите, что для создания эффекта №4 нам потребуется дополнительное отделение, обволакивающее изображение. Класс для каждого отдельного эффекта будет добавлен в список; таким образом, пример 1 будет обозначен классом “cs-style-1”, пример 2 классом “cs-style-2” и так далее. Таким образом мы определяем стиль эффектов для каждого отдельного примера.Но сначала давайте укажем общие стили для всех эффектов.

CSS-код

Обратите внимание на то, что 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;
}

Если мы применим способ отображения пунктов списка как inline-blocks, это позволит нам центрировать их при помощи свойства text-align: center, примененного к родительскому элементу.Давайте сбросим поля для элементов figure, и выставим позиционирование на относительное. Наш элемент figcaption будет иметь абсолютное позиционирование, поэтому нам нужно убедиться в том, что это происходит внутри элемента figure:

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

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

.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:” и т.п. Постарайтесь не удалить значения из вашего HTML-кода.В конце нашего CSS-кода мы также добавляем media query для маленьких экранов:

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

А теперь, давайте приступим к разработке интересных эффектов.

Имейте в виду, что мы будем использовать Modernizr для определения touch-поддержки. Но здесь важно учесть тот аспект, что при тестировании эти примеры могут показать не совсем намеченный эффект, если вы будете проводить его не на устройствах с поддержкой touch. Мы заменим наведение на прикосновение, и добавим класс, который будет запускать эффекты, когда прикосновение будет зафиксировано. Поэтому вы можете видеть еще одно правило для этой функции вдобавок к :hover. Нам нужно лишь чтобы hover запускалось при фиксировании события touch.

Эффект 1

1372251137_1372237328_img-02-7762139 Давайте начнем с простого эффекта. Нам нужно, чтобы подпись появлялась и сдвигалась немного вправо и вниз, создавая иллюзию трехмерного слоя, который как бы выходит из изображения.Для этого нам сначала нужно выставить ширину и высоту элемента 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 и немного трансформируем figcaption:

.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

1372251457_1372237287_img-03-3302047

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

1372251631_1372237337_img-04-9512751 Еще один подход к эффекту №2 подразумевает сокрытие наложения при перемещении изображения. Давайте реализуем это, и сделаем так, будто подпись слегка подталкивает изображение вверх.Сначала, нам нужно выставить параметр overflow у figure на hidden. Таким образом, мы не будем видеть ничего, что выходит за пределы элемента:

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

Изображению нужен переход для трансформации, и поэтому при наведении мы переместим его на 50 пикселей вверх:

.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

1372251742_1372237323_img-05-4252252 В 4-м примере будут задействованы некоторые трехмерные свойства. Наша цель в том, чтобы провернуть подпись с левой стороны и сдвинуть изображение слегка вправо.Мы воспользуемся пунктом списка как контейнером перспективы, чтобы у вас была возможность обыграть трехмерные трансформации:

CSS-код

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

Дочерние элементы должны быть обозначены следующим transform-style, если нам нужно, чтобы трехмерные трансформации работали в других элементах:

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

Как уже было отмечено ранее, в данном примере у изображения будет другая оболочка. Для чего нам это? Нам нужно выставить свойство overflow родительского элемента изображения на hidden, так как нам нужно, чтобы изображение не выходило за рамки контейнера, когда мы перемещаем его. Мы можем выставить overflow элемента figure на 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

1372251878_1372237369_img-06-5387511 Данный эффект будет сжимать изображение, и отображать подпись.Давайте поместим изображение поверх подписи, и добавим переход для трансформации:

.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

1372251928_1372237339_img-07-2598858 Данный эффект представляет собой вариацию эффекта под номером 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

1372252035_1372237300_img-08-7197115 Последний эффект в данном руководстве подразумевает под собой «рост» подписи из-под изображения, превращаясь в нечто вроде рамки.Так как рамка первых элементов будет накладываться на другие элементы, нам нужно поработать над параметрами 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, увеличиваем высоту и выставляем значение spread свойства box-shadow на 10 пикселей:

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

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

И на этом всё! Мы надеемся, что вам понравилось данное руководство, и вы вдохновились на создание собственные заманчивых эффектов!

Исходники в архиве.

Метки: