Создайте современные hover эффекты на CSS3

современные hover эффекты на CSS3

От автора: свойство CSS transition дает нам возможность анимировать изменения значения свойства CSS. Это можно использовать для постепенного гладкого изменения значения, а с помощью задержки имитировать переход элементов. Свойство CSS transform позволяет преобразовать элементы в двух- или трехмерном пространстве. В этом учебнике мы применим 2D-преобразования.

Шаг 1 – создание базового HTML

Сначала создаем простую основу HTML.

<div class="block_holder">
<div class="block">
<img src="250.jpg" />
                <div class="hover_info">
           </div>
     </div>
</div>

Так мы построили разметку своего блока. Блок содержит изображение и div hover_info, где будет та информация, которую нужно отобразить при проведении мышью.

Шаг 2 – создание базового CSS

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

.block_holder {
    padding: 7px;
    background: #f6f6f6;
    width: 350px;
    height: 250px;
    box-shadow:  0px 0px 3px 1px rgba(0, 0, 0, 0.15);
    float: left;
    margin: 15px;
}
 
.block {
    width: 350px;
    height: 250px;
    position: relative;
    overflow: hidden;
}
 
.hover_info {
    width: 350px;
    height: 250px;
    position: absolute;
    top: 0;
    left: 0;
    background: rgba(0, 0, 0, 0.8); 
    width: 100%;
    height: 100%;
    position: absolute;
    left: -86%;  
    top: -19%;
    transition: all 200ms linear; 
    transform: rotate(90deg);
}

Теперь, после добавления CSS наш блок содержит изображение и div под названием hover_info. В этот CSS мы добавили немного основных стилей для block_holder и блока .block . Добавили к div’у hover_info фон с непрозрачностью 80%, абсолютное позиционирование для того, чтобы разместить его вне блока, и применили к .block overflow hidden, чтобы div hover_info не появлялся.

Затем использовалось свойство CSS transition, которое дает возможность определить элементы, к которым нужно применить переход. Мы воспользовались all, поэтому переход применяется ко всем элементам, где изменено значение. Установили продолжительность на 200мс – так долго будет длиться переход для всех измененных элементов. Наконец, применили linear в качестве функции расчета времени, что означает: наши переходы будут от начала и до конца иметь постоянную скорость. Затем мы используем transform для вращения div’а на 90 градусов.

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

.block:hover .hover_info { 
top: 0; 
left: 0; 
transform: rotate(0deg); 
}

В этом CSS при проведении мышью над блоком мы меняем свойства top, left и transform div’а hover_info . Так анимируется div, накладываемый поверх изображения. При проведении мышью div должен вернуться на место, как видно на этом демо-примере.

Шаг 3 – добавление окончательного HTML

Теперь, когда при проведении мышью есть основа с изначальным переходом, мы добавим в div hover_info содержимое в виде заголовка, абзаца и ссылки.

<div class="block_holder">
<div class="block">
<img src="250.jpg" />
                 <div class="hover_info">
                        <h1>Article Title</h1>
                <p>Lorem ipsum dolor. Aenean scelerisque odio ut dui feugiat commodo. Nulla blandit erat vel nisi consectetur ac pharetra augue consectetur.</p>
                 <a href="#">Read more</a>
            </div>
     </div>
</div>

Шаг 4 – добавление окончательного CSS

Когда HTML готов, добавим ко всем элементам стили.

.hover_info h1 { 
font-size: 2em; 
padding: 10px 20px; 
background: rgba(207, 138, 5, 0.7); 
color: #E7E7E7; 
position: absolute; 
top: 25px; 
left: -100%; 
transition: left 200ms linear;
}
 
.hover_info:hover h1 { 
left: 0; 
transition-delay: 200ms; 
}

Мы разместили H1 в 25px от верха и изначально в 100% слева для того, чтобы вначале он был скрыт. При проведении мышью меняем левую позицию на 0 с тем, чтобы H1 выскользнул слева. Применяем при проведении мышью свойство transition-delay с установкой на 200мс, чтобы то происходило после изначального перехода.

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

.hover_info p { 
font-size: 1.5em; 
line-height: 1.4; 
color: #fff; 
position: absolute; 
top: 85px; 
left: 10%; 
width: 80%; 
text-align: center; 
opacity: 0; 
transition: opacity 200ms linear; 
}
 
.hover_info:hover p { 
opacity: 1; 
transition-delay: 600ms; 
}

Мы поместили абзац в 85px от верха и 10% слева с шириной в 80%. Так создастся впечатление того, что абзац находится в центре блока. Мы установили непрозрачность на 0, поэтому он изначально не появляется, и установили переход transition к непрозрачности opacity со скоростью 200мс при помощи функции линейного расчета времени.

При проведении мышью мы затем установили непрозрачность на 1, что заставляет появиться текст. Установили задержку в 600мс, что означает переход случится после первоначального вращения и выскальзывания заголовка.

.hover_info a { 
font-size: 1.5em; 
padding: 10px 20px; 
background: rgba(207, 138, 5, 0.7); 
color: #E7E7E7; 
position: absolute; 
bottom: 25px; 
right: -100%; 
text-decoration: none; 
}
 
.hover_info:hover a { 
right: 0; 
transition: right 200ms linear 700ms, color, background 200ms linear;
}
 
.hover_info a:hover { 
background: rgba(207, 138, 5, 1.0); 
color: #F7F7F7; 
}

Мы назначили этому тэгу те же стили, что и тэгу заголовка, за исключением того, что на этот раз он находится внизу справа и снова изначально расположен справа. При проведении мышью мы затем делаем переход справа со скоростью 200мс при линейной скорости, на этот раз с задержкой в 700мс. Эта задержка означает, что переход начнется посреди перехода абзаца. Затем делаем финальную пару переходов цвета и фона с той же скоростью, но уже без задержки. Это будет работать при проведении мышью над тэгом – тот изменит фон и цвет текста.

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

Автор: Thomas Hardy

Источник: http://www.netmagazine.com/

Редакция: Команда webformyself.

Практика HTML5 и CSS3 с нуля до результата!

Получите бесплатный пошаговый видеокурс по основам адаптивной верстки с полного нуля на HTML5 и CSS3

Получить

Метки:

Комментарии Вконтакте:

Комментарии Facebook:

Комментарии (2)

  1. Эдуард

    Интересная статья!
    Только я думаю, что в ней не хватает демо того, что получится в результате:

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

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

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Я не робот.

Spam Protection by WP-SpamFree