17 393 Скрипты / Animation

Эффекты при наведении для блоков с заголовками

 

Немножко свежих идей для красивого оформления блоков с заголовками при наведении на них курсора. Тонкие линии, белый цвет - ничего лишнего.
Будем использовать 3D transform и transition для псевдо-элементов - работать данные эффекты будут только в современных браузерах.
К сожалению, не все эффекты с текстом в Firefox происходят плавно, может в следующих версиях ситуация улучшится.

Иконки используемые в демке Feather icon set от Cole Bemis.

HTML

Для разметки используем сетку с figure:

<div class="grid">
 
    <figure class="effect-lily">
        <img src="img/1.jpg" alt="img01"/>
        <figcaption>
            <h2>Nice <span>Lily</span></h2>
            <p>Lily likes to play with crayons and pencils</p>
            <a href="#">View more</a>
        </figcaption>
    </figure>
 
    <!-- ... -->
    
</div>

CSS

Пример стилей для одного из блоков.

Данный эффект назвали "Sadie".

У нас тут есть псевдо-элемент с линейным градиентом снизу, и дополнительным появляющимся текстом. Также заголовок будет изменять цвет:

Остальные общие стили для сетки и индивидуальные стили для каждого блока с эффектами ищите в content.css.

Скачать 4718Загрузок 1,24 Mb
Демо

Комментарии

  • Facebook
  • Вконтакте

Похожие статьи