—»     —»   Оригинальный эффект при наведении на CSS3
  Раздел: Руководства, CSS/Style Sheets   Комментариев: 1  

Оригинальный эффект при наведении на CSS3

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

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

Оригинальный эффект при наведении на CSS3

Верстка

Структура документа будет очень простой и понятной. Создайте контейнер, в котором расположится наше изображение и всю информацию.

Внутри view расположите элемент с классом mask, который и будет отвечать за наш эффект на CSS3, и внутри данного элемента мы разместим заголовок, описание и ссылку на полную версию изображения. (Для примера, нам нужно добавить элемент с классом mask в качестве отдельного элемента, и обернуть описание в div с классом content).

<div class="view">
<img src="image.gif" />
<div class="mask">
<h2>Title</h2>
<p>Your Text</p>
<a href="#" class="info">Read More</a>
</div>
</div>

CSS-код

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

.view {
width: 300px;
height: 200px;
margin: 10px;
float: left;
border: 10px solid #fff;
overflow: hidden;
position: relative;
text-align: center;
box-shadow: 1px 1px 2px #e6e6e6;
cursor: default;
background: #fff url(../images/bgimg.jpg) no-repeat center center
}
.view .mask, .view .content {
width: 300px;
height: 200px;
position: absolute;
overflow: hidden;
top: 0;
left: 0
}
.view img {
display: block;
position: relative
}
.view h2 {
text-transform: uppercase;
color: #fff;
text-align: center;
position: relative;
font-size: 17px;
padding: 10px;
background: rgba(0, 0, 0, 0.8);
margin: 20px 0 0 0
}
.view p {
font-family: Georgia, serif;
font-style: italic;
font-size: 12px;
position: relative;
color: #fff;
padding: 10px 20px 20px;
text-align: center
}
.view a.info {
display: inline-block;
text-decoration: none;
padding: 7px 14px;
background: #000;
color: #fff;
text-transform: uppercase;
box-shadow: 0 0 1px #000
}
.view a.info:hover {
box-shadow: 0 0 5px #000
}

И теперь давайте взглянем на 10 эффектов.

Пример 1

Оригинальный эффект при наведении на CSS3

Для данного эффекта мы добавляем специальный класс view-first к элементу с классом view. Мы будем задавать специальный класс к каждому элементу view в примере (view-first, view-second, view-third и т.д.).

<div class="view view-first">

</div>

В первом примере мы используем простенький переход для создания привлекательного эффекта.

.view-first img {
transition: all 0.2s linear;
}
.view-first .mask {
opacity: 0;
background-color: rgba(219,127,8, 0.7);
transition: all 0.4s ease-in-out;
}
.view-first h2 {
transform: translateY(-100px);
opacity: 0;
transition: all 0.2s ease-in-out;
}
.view-first p {
transform: translateY(100px);
opacity: 0;
transition: all 0.2s linear;
}
.view-first a.info{
opacity: 0;
transition: all 0.2s ease-in-out;
}

А сейчас перейдем к «сердцу» нашего эффекта. Когда вы наводите курсор мыши поверх изображения, можно использовать параметр delay, который имитирует простую анимацию. Transition-delay, который мы использовали в классе при наведении может быть изменен, можно сделать его непохожим на нормальный класс. В данном примере мы не будем применять какую-либо задержку в нормально классе, но мы добавили задержку в класс эффекта при наведении, что приводит к тому, что переход начинается немного позже. Убирая курсор мыши с элемента, ему будет задано значение по умолчанию (0s), поэтому «возврат» будет произведен гораздо быстрее.

.view-first:hover img {
transform: scale(1.1);
}
.view-first:hover .mask {
opacity: 1;
}
.view-first:hover h2,
.view-first:hover p,
.view-first:hover a.info {
opacity: 1;
transform: translateY(0px);
}
.view-first:hover p {
transition-delay: 0.1s;
}
.view-first:hover a.info {
transition-delay: 0.2s;
}

Пример 2

Оригинальный эффект при наведении на CSS3

Во втором примере мы добавим специальный класс view-second, но мы оставим элемент с классом mask пустым, и обернем описание в div с классом content.

<div class="view view-second">
<img src="images/5.jpg" />
<div class="mask"></div>
<div class="content">
<h2>Hover Style #2</h2>
<p>Some description</p>
<a href="#" class="info">Read More</a>
</div>
</div>

Здесь классу mask будут заданы различные атрибуты, дабы соответствовать требованиям эффекта. На самом деле, мы применим параметры transform (translate и rotate), и воссоздадим из него квадрат. Элементы с описанием будут трансформированы (т.е. смещены так, чтобы мы имели возможность отобразить их при наведении курсором мыши):

.view-second img {
transition: all 0.2s ease-in;
}
.view-second .mask {
background-color: rgba(115,146,184, 0.7);
width: 300px;
padding: 60px;
height: 300px;
opacity: 0;
transform: translate(265px, 145px) rotate(45deg);
transition: all 0.2s ease-in-out;
}
.view-second h2 {
border-bottom: 1px solid rgba(0, 0, 0, 0.3);
background: transparent;
margin: 20px 40px 0px 40px;
transform: translate(200px, -200px);
transition: all 0.2s ease-in-out;
}
.view-second p {
transform: translate(-200px, 200px);
transition: all 0.2s ease-in-out;
}
.view-second a.info {
transform: translate(0px, 100px);
transition: all 0.2s 0.1s ease-in-out;
}

Для нашего эффекта при наведении мы использовали трансформацию translate, чтобы сдвинуть наши элементы на месте. Mask также будет трансформирован. Элементы описания будут отображены с небольшой задержкой:

.view-second:hover .mask {
opacity:1;
transform: translate(-80px, -125px) rotate(45deg);
}
.view-second:hover h2 {
transform: translate(0px,0px);
transition-delay: 0.3s;
}
.view-second:hover p {
transform: translate(0px,0px);
transition-delay: 0.4s;
}
.view-second:hover a.info {
transform: translate(0px,0px);
transition-delay: 0.5s;
}

Пример 3

Оригинальный эффект при наведении на CSS3

В третьем примере для отображения контента мы используем трансформации translate и rotate:

.view-third img {
transition: all 0.2s ease-in;
}
.view-third .mask {
background-color: rgba(0,0,0,0.6);
opacity: 0;
transform: translate(460px, -100px) rotate(180deg);
transition: all 0.2s 0.4s ease-in-out;
}
.view-third h2{
transform: translateY(-100px);
transition: all 0.2s ease-in-out;
}
.view-third p {
transform: translateX(300px) rotate(90deg);
transition: all 0.2s ease-in-out;
}
.view-third a.info {
transform: translateY(-200px);
transition: all 0.2s ease-in-out;
}

Также нужно применить простенькие инструкции к эффекту при наведении. Теперь мы перевернем процесс появления элементов описания путем установки соответствующего значения transition-delay:

.view-third:hover .mask {
opacity:1;
transition-delay: 0s;
transform: translate(0px, 0px);
}
.view-third:hover h2 {
transform: translateY(0px);
transition-delay: 0.5s;
}
.view-third:hover p {
transform: translateX(0px) rotate(0deg);
transition-delay: 0.4s;
}
.view-third:hover a.info {
transform: translateY(0px);
transition-delay: 0.3s;
}

Пример 4

Оригинальный эффект при наведении на CSS3

В 4 нашем примере мы произведем небольшое уменьшение изображения и приближение контента посредством rotation. Все это благодаря трансформациям CSS3. В стиле для изображения устанавливаем transition-delay на 0.2s, но на эффекте при наведении устанавливаем его на 0s. Это позволит нам начать действие сразу при наведении, но замедлить эффект тогда, когда курсор мыши уже покинул пределы миниатюры.

.view-fourth img {
transition: all 0.4s ease-in-out 0.2s;
opacity: 1;
}
.view-fourth .mask {
background-color: rgba(0,0,0,0.8);
opacity: 0;
transform: scale(0) rotate(-180deg);
transition: all 0.4s ease-in;
border-radius: 0px;
}
.view-fourth h2{
opacity: 0;
border-bottom: 1px solid rgba(0, 0, 0, 0.3);
background: transparent;
margin: 20px 40px 0px 40px;
transition: all 0.5s ease-in-out;
}
.view-fourth p {
opacity: 0;
transition: all 0.5s ease-in-out;
}
.view-fourth a.info {
opacity: 0;
transition: all 0.5s ease-in-out;
}

Здесь нам понадобятся простенькие инструкции, но с CSS3 нет ничего невозможного!

.view-fourth:hover .mask {
opacity: 1;
transform: scale(1) rotate(0deg);
transition-delay: 0.2s;
}
.view-fourth:hover img {
transform: scale(0);
opacity: 0;
transition-delay: 0s;
}
.view-fourth:hover h2,
.view-fourth:hover p,
.view-fourth:hover a.info{
opacity: 1;
transition-delay: 0.5s;
}

Пример 5

Оригинальный эффект при наведении на CSS3

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

.view-fifth img {
transition: all 0.3s ease-in-out;
}
.view-fifth .mask {
background-color: rgba(146,96,91,0.3);
transform: translateX(-300px);
opacity: 1;
transition: all 0.4s ease-in-out;
}
.view-fifth h2{
background: rgba(255, 255, 255, 0.5);
color: #000;
box-shadow: 0px 1px 3px rgba(159, 141, 140, 0.5);
}
.view-fifth p{
opacity: 0;
color: #333;
transition: all 0.2s linear;
}

Эффект при наведении выдвинет изображение в право, а описание появится слева, как будто бы выталкивая изображение:

.view-fifth:hover .mask {
transform: translateX(0px);
}
.view-fifth:hover img {
transform: translateX(300px);
transition-delay: 0.1s;
}
.view-fifth:hover p{
opacity: 1;
transition-delay: 0.4s;
}

Пример 6

Оригинальный эффект при наведении на CSS3

В данном примере мы сделаем так, чтобы описание выдвигалось с тыльной стороны (постепенно набирая размер до оригинального: от 10 до 1). Кнопка информации будет выезжать с нижней части (реализовано с помощью translate).

.view-sixth img {
transition: all 0.4s ease-in-out 0.5s;
}
.view-sixth .mask{
background-color: rgba(146,96,91,0.5);
opacity:0;
transition: all 0.3s ease-in 0.4s;
}
.view-sixth h2{
opacity:0;
border-bottom: 1px solid rgba(0, 0, 0, 0.3);
background: transparent;
margin: 20px 40px 0px 40px;
transform: scale(10);
transition: all 0.3s ease-in-out 0.1s;
}
.view-sixth p {
opacity:0;
transform: scale(10);
transition: all 0.3s ease-in-out 0.2s;
}
.view-sixth a.info {
opacity:0;
transform: translateY(100px);
transition: all 0.3s ease-in-out 0.1s;
}

Обратный переход будет с задержкой, дабы придать плавности:

.view-sixth:hover .mask {
opacity:1;
transition-delay: 0s;
}
.view-sixth:hover img {
transition-delay: 0s;
}
.view-sixth:hover h2 {
opacity: 1;
transform: scale(1);
transition-delay: 0.1s;
}
.view-sixth:hover p {
opacity:1;
transform: scale(1);
transition-delay: 0.2s;
}
.view-sixth:hover a.info {
opacity:1;
transform: translateY(0px);
transition-delay: 0.3s;
}

Пример 7

Оригинальный эффект при наведении на CSS3

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

.view-seventh img{
transition: all 0.5s ease-out;
opacity: 1;
}
.view-seventh .mask {
background-color: rgba(77,44,35,0.5);
transform: rotate(0deg) scale(1);
opacity: 0;
transition: all 0.3s ease-out;
transform: translateY(-200px) rotate(180deg);
}
.view-seventh h2{
transform: translateY(-200px);
transition: all 0.2s ease-in-out;
}
.view-seventh p {
transform: translateY(-200px);
transition: all 0.2s ease-in-out;
}
.view-seventh a.info {
transform: translateY(-200px);
transition: all 0.2s ease-in-out;
}

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

.view-seventh:hover img{
transform: rotate(720deg) scale(0);
opacity: 0;
}
.view-seventh:hover .mask {
opacity: 1;
transform: translateY(0px) rotate(0deg);
transition-delay: 0.4s;
}
.view-seventh:hover h2 {
transform: translateY(0px);
transition-delay: 0.7s;
}
.view-seventh:hover p {
transform: translateY(0px);
transition-delay: 0.6s;
}
.view-seventh:hover a.info {
transform: translateY(0px);
transition-delay: 0.5s;
}

Пример 8

Оригинальный эффект при наведении на CSS3

В 8 примере мы используем анимацию для воссоздания эффекта скачка. Описание «прискачет» сверху.

.view-eighth .mask {
background-color: rgba(255, 255, 255, 0.7);
top: -200px;
opacity: 0;
transition: all 0.3s ease-out 0.5s;
}
.view-eighth h2{
transform: translateY(-200px);
transition: all 0.2s ease-in-out 0.1s;
}
.view-eighth p {
color: #333;
transform: translateY(-200px);
transition: all 0.2s ease-in-out 0.2s;
}
.view-eighth a.info {
transform: translateY(-200px);
transition: all 0.2s ease-in-out 0.3s;
}

Мы добавим анимацию в элемент mask и определим подходящую задержку для элементов с описанием:

.view-eighth:hover .mask {
opacity: 1;
top: 0px;
transition-delay: 0s;
animation: bounceY 0.9s linear;
}
.view-eighth:hover h2 {
transform: translateY(0px);
transition-delay: 0.4s;
}
.view-eighth:hover p {
transform: translateY(0px);
transition-delay: 0.2s;
}
.view-eighth:hover a.info {
transform: translateY(0px);
transition-delay: 0s;
}

Для воссоздания хорошего эффекта скачка мы будем использовать translateY, ввиду возможно видеть несколько кадров:

@keyframes bounceY {
0% { transform: translateY(-205px);}
40% { transform: translateY(-100px);}
65% { transform: translateY(-52px);}
82% { transform: translateY(-25px);}
92% { transform: translateY(-12px);}
55%, 75%, 87%, 97%, 100% { transform: translateY(0px);}
}

Пример 9

Оригинальный эффект при наведении на CSS3

В данном примере мы будем использовать два элемента mask, они будут скользить из нижней правой части в верхнюю левую:

<div class="view view-ninth">
<img src="images/11.jpg" />
<div class="mask mask-1"></div>
<div class="mask mask-2"></div>
<div class="content">
<h2>Hover Style #9</h2>
<p>Some Text</p>
<a href="#" class="info">Read More</a>
</div>
</div>

У двух элементов mask будут разные исходные значения translation и transform. Мы также сделаем, чтобы один из элементов был выровнен по верхнему краю, а второй – по нижнему:

.view-ninth .mask-1,
.view-ninth .mask-2{
background-color: rgba(0,0,0,0.5);
height: 361px;
width: 361px;
background: rgba(119,0,36,0.5);
opacity: 1;
transition: all 0.3s ease-in-out 0.6s;
}
.view-ninth .mask-1 {
left: auto;
right: 0px;
transform: rotate(56.5deg) translateX(-180px);
transform-origin: 100% 0%;
}
.view-ninth .mask-2 {
top: auto;
bottom: 0px;
transform: rotate(56.5deg) translateX(180px);
transform-origin: 0% 100%;
}

Контент будет оформлен так, как будто он извлекается маленьким отрезком через края двух элементов mask:

.view-ninth .content{
background: rgba(0,0,0,0.9);
height: 0px;
opacity: 0.5;
width: 361px;
overflow: hidden;
transform: rotate(-33.5deg) translate(-112px,166px);
transform-origin: 0% 100%;
transition: all 0.4s ease-in-out 0.3s;
}
.view-ninth h2{
background: transparent;
margin-top: 5px;
border-bottom: 1px solid rgba(255,255,255,0.2);
}
.view-ninth a.info{
display: none;
}


.view-ninth:hover .content{
height: 120px;
width: 300px;
opacity: 0.9;
top: 40px;
transform: rotate(0deg) translate(0px,0px);
}
.view-ninth:hover .mask-1,
.view-ninth:hover .mask-2{
transition-delay: 0s;
}
.view-ninth:hover .mask-1{
transform: rotate(56.5deg) translateX(1px);
}
.view-ninth:hover .mask-2 {
transform: rotate(56.5deg) translateX(-1px);
}

Мы установим transition-delay для масок таким образом, что при наведении переход будет производиться внезапно. Но когда курсор мыши будет выведен за пределы элемента, задержка будет немного дольше. Мы как будто ожидаем, пока контент вернется на место.

Пример 10

Оригинальный эффект при наведении на CSS3

В нашем последнем примере мы приблизим изображение и сделаем так, чтобы оно затемнилось, когда описание выходит на передний план. Это можно сделать посредством параметра scale и указания уровня прозрачности:

.view-tenth img {
transform: scaleY(1);
transition: all 0.7s ease-in-out;
}
.view-tenth .mask {
background-color: rgba(255, 231, 179, 0.3);
transition: all 0.5s linear;
opacity: 0;
}
.view-tenth h2{
border-bottom: 1px solid rgba(0, 0, 0, 0.3);
background: transparent;
margin: 20px 40px 0px 40px;
transform: scale(0);
color: #333;
transition: all 0.5s linear;
opacity: 0;
}
.view-tenth p {
color: #333;
opacity: 0;
transform: scale(0);
transition: all 0.5s linear;
}
.view-tenth a.info {
opacity: 0;
transform: scale(0);
transition: all 0.5s linear;
}

При наведении мы просто увеличим изображение и затемним его посредством понижения плотности до 0:

.view-tenth:hover img {
transform: scale(10);
opacity: 0;
}
.view-tenth:hover .mask {
opacity: 1;
}
.view-tenth:hover h2,
.view-tenth:hover p,
.view-tenth:hover a.info{
transform: scale(1);
opacity: 1;
}

Завершение

CSS3 действительно позволяет создавать невероятные эффекты. Скоро мы наверняка сможем отказаться от использования javascript в пользу удобства и простоты пользования функционала CSS. Во всех браузерах. Надеемся, что вам понравились данные эксперименты!

Смотреть демо | Скачать архивом
Внимание! У вас нет прав для просмотра скрытого текста.


Постовой: Аренда интернет магазина – это услуга, при которой вы в advantshop.net получаете полностью готовый к работе магазин за ежемесячную плату.
Обнаружили ошибку или мёртвую ссылку?
Выделите проблемный фрагмент мышкой и нажмите CTRL+ENTER.
В появившемся окне опишите проблему и отправьте уведомление Администрации ресурса.
Нужна органическая вечная ссылка из данной статьи? Постовой?
Подробности здесь
Вам понравился материал? Поблагодарить легко!
Будем весьма признательны, если поделитесь этой статьей в социальных сетях:

Ключевые тэги: CSS
Опубликовал Design FactoRy   Прочитано (раз): 13995   |   Оставлено комментариев: 1
Источник материала / оригинал статьи   Распечатать
Другие статьи и новости по теме:
Комментарий #1: 2 февраля 2012 @ 09:57
Написал: Елена — группа: Гости  
На сайте с: --   |   Публикаций: 0   |   Комментариев: 0
ICQ: --- не указано ---
Очень интересные эффекты! И ничего сложного. Обязательно надо поэкспериментировать.
Добавление комментария
Уважаемые пользователи!
При добавлении комментариев на сайт Вам следует учитывать следующее - все комментарии проверяются Администрацией на предмет отсутствия спама. При обнаружении признаков спама, в оставленном Вами комментарии, сам комментарий будет незамедлительно удалён, а Ваш IP-адрес будет забанен без предупреждения! Учётные записи пользователей, рассылающих спам, блокируются/удаляются без права последующего восстановления.

С уважением, Администрация сайта.
* = поля обязательны к заполнению
Полужирный Наклонный текст Подчеркнутый текст Зачеркнутый текст | Выравнивание по левому краю По центру Выравнивание по правому краю | Вставка смайликов Выбор цвета | Скрытый текст Вставка цитаты Преобразовать выбранный текст из транслитерации в кириллицу Вставка спойлера
Вопрос : Национальная денежная единица России
Подтверждение кода безопасности :

Включите эту картинку для отображения кода безопасности
обновить, если не виден код


Спонсоры проекта
Баннер в сайдбаре 1 (сквозной)
Баннер в сайдбаре 2 (сквозной)
Спонсоры проекта
Баннер в сайдбаре 3 (сквозной)
Баннер в сайдбаре 4 (сквозной)
Популярные публикации







Свежие шаблоны сайтов каждый день
С миру по нитке
«    Март 2024    »
ПнВтСрЧтПтСбВс
 123
45678910
11121314151617
18192021222324
25262728293031