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

В этом уроке, мы создадим несколько современных CSS3 hover-эффектов, используя CSS transitions (переходы), transforms (трансформации) и delays (задержки).

CSS transition дает нам возможность анимировать изменения в значениях CSS property. При помощи transition delays мы можем подтолкнуть переход (transition) элементов. CSS transforms позволяют нам трансформировать элементы в двух или трехмерном пространстве. В этом уроке, мы будем использовать 2D трансформацию. В Демо ниже представлены различные вариации этого эффекта, но в уроке мы рассмотрим создание одного из них.

Смотреть Демо

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

Первым шагом является создание простой HTML разметки.

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

Мы создали контейнер для нашего блока. Он содержит наше изображение и hover_info div, который, как следует из названия, будет содержать информацию, которую мы хотим отобразить при наведении курсора мыши (hover).

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

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

.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 и блоку. Мы добавили фон с прозрачностью 80% к hover_info div; использовали абсолютное позиционирование, чтобы разместить div подальше от блока; и использовали overflow hidden на блоке, чтобы убедиться, что он не появится вне границ.

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

Последней частью этого кода, будет установка нашего CSS, для использования hover на блоке.

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

В этом CSS мы меняем top, left и transform свойства hover_info div на hover блока. Это анимирует div, для его накладывания поверх изображения.

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

Так как у нас уже есть база с начальным hover transition, нам нужно добавить содержимое в hover_info div, в виде названия(title), параграфа(paragraph) и ссылки(link).

<div class="block_holder">
<div class="block">
<img src="wdm.jpg" />
                 <div class="hover_info">
                        <h1>Название</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="#">Читать далее</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% влево, чтобы убедиться, что оно скрыто в самом начале. При hover, мы меняем левое положение на 0, чтобы H1 мог появиться слева. Мы используем transition-delay свойство на hover c настройками в 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%. Это создаст впечатление, что параграф находится в центре блока, когда он охватывает более 3 линии. Мы поставили непрозрачность до 0, чтобы он не появлялся на начальном этапе, и установили переход на непрозрачность со скоростью 200 мс использую линейную (linear)функцию времени.При hover, мы устанавливаем непрозрачность к 1, что заставляет текст исчезать. Мы установили задержку на 600 мс, обозначая, что переход произойдет после первого поворота и slide-in заголовка.

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

Смотреть Демо:

See the Pen Оригинальные hover-эффекты CSS3-5 by vavik (@vavik96) on CodePen.