CSS3 эффект при наведении на изображение + 5 примеров!
↓ Также Вам будет интересно ↓
Привет, ребята! На этот раз мы будем рассматривать эффект при наведении на изображение. Я приведу 5 примеров эффекта при наведении, с использованием последних свойств CSS3. В прошлом мы уже рассматривали подобную концепцию, только CSS3 увеличение изображения при наведении.
В данном случае мы задаем каждому изображению красивую границу border
, который будет создавать специфичный, но эффектный вид. Давайте приступим…
HTML разметки
Мы имеем простую конструкцию кода, в виде родительского класса view
, и содержимого внутри него. Создадим класс mask
, к которому будут применены CSS3 переходы, чтобы получить эффект при наведении.
В других примерах, такой синтаксис может незначительно измениться в зависимости от эффекта, который вы хотите применить.
1 2 3 4 5 6 7 |
<div class="view"> <img src="/web-developer/css/images/1.jpg" /> <div class="mask"></div> <div class="content"> <a href="#" class="info" title="Full Image">Full Image</a> </div> </div> |
Вот, в общем-то и все с html! Все действительно просто – перейдём к css.
CSS3 прелести
Ниже Вы видите основные свойства. Для каждого эффекта будет разный файл .css
, поэтому если хотите, можете объединить все эффекты в один файл.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 |
.view { width: 300px; height: 200px; margin: 10px; float: left; border: 5px solid #fff; overflow: hidden; position: relative; text-align: center; box-shadow: 0px 0px 5px #aaa; cursor: default; } .view .mask, .view .content { width: 300px; height: 200px; position: absolute; overflow: hidden; top: 0; left: 0; } .view img { display: block; position: relative; } .view a.info { background:url(../img/link.png) center no-repeat; display: inline-block; text-decoration: none; padding:0; text-indent:-9999px; width:20px; height:20px; } |
Рассмотрим каждый эффект в отдельности.
Добавим специальный класс effect
к элементу с классом view
, чтобы активировать эффект. Получим следующее:
1 2 3 4 5 6 7 |
<div class="view effect"> <img src="/web-developer/css/images/1.jpg" /> <div class="mask"></div> <div class="content"> <a href="#" class="info" title="Full Image">Full Image</a> </div> </div> |
По причине экономии места я опустил префиксы (-moz-,-webkit- и т.д.), но вы найдете все их в исходниках.
Кроме использования border
для создания треугольника, я использовал несколько переходов, что позволяет мне лучше контролировать каждое свойство во время анимации.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 |
.effect img { opacity:1; transform:scale(1,1); transition: all 0.2s ease-in; } .effect .mask { opacity:0; overflow:visible; border-color:rgba(0,0,0,0.7) transparent transparent transparent; border-style:solid; border-width:150px; width:0; height:0; transform:translateY(-125px); transition: transform 0.2s 0.1s ease-out, opacity 0.3s ease-in-out; } .effect a.info { opacity:0; transform:translateY(-125px); transition: transform 0.3s ease-in, opacity 0.1s ease-in-out; } .effect:hover img { opacity:0.7; transform:scale(2,2); } .effect:hover .mask { opacity: 1; transform: translateY(0px); } .effect:hover a.info { opacity:1; transform:translateY(100px); } |
Синтаксис в этом примере немного отличается. все также необходимо добавить второй класс second-effect
, но в данном случае поместить ссылку внутри div
с классом mask
. То есть, вот так:
1 2 3 4 5 6 |
<div class="view second-effect"> <img src="/web-developer/css/images/2.jpg" /> <div class="mask"> <a href="#" class="info" title="Full Image">Full Image</a> </div> </div> |
В этом примере мы будем работать с параметрами свойства border
. Также применено положение box-sizing
. Это свойство используется для расчета ширины и высоты элементов.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 |
.second-effect .mask { opacity: 0; overflow:visible; border:0px solid rgba(0,0,0,0.7); box-sizing:border-box; transition: all 0.4s ease-in-out; } .second-effect a.info { position:relative; top:-10px; opacity:0; transform:scale(0,0); transition: transform 0.2s 0.1s ease-in, opacity 0.1s ease-in-out; } .second-effect:hover .mask { opacity: 1; border:100px solid rgba(0,0,0,0.7); } .second-effect:hover a.info { opacity:1; transform:scale(1,1); transition-delay:0.3s; } |
Для применения эффекта, все также необходимо добавить второй класс, только теперь с названием third-effect
.
1 2 3 4 5 6 |
<div class="view third-effect"> <img src="/web-developer/css/images/3.jpg" /> <div class="mask"> <a href="#" class="info" title="Full Image">Full Image</a> </div> </div> |
Как видно ниже, здесь мало строк стилей, но благодаря свойству border
, мы можем иметь хороший эффект при наведении.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 |
.third-effect .mask { opacity: 0; overflow:visible; border:100px solid rgba(0,0,0,0.7); box-sizing:border-box; transition: all 0.4s ease-in-out; } .third-effect a.info { position:relative; top:-10px; /* Center the link */ opacity: 0; transition: opacity 0.5s 0s ease-in-out; } .third-effect:hover .mask { opacity: 1; border:100px solid rgba(0,0,0,0.7); } .third-effect:hover a.info { opacity:1; transition-delay: 0.3s; } |
Здесь кода мало, по сравнению с предыдущими примерами, однако эффект при наведении будет очень внушительным.
1 2 3 4 |
<div class="view fourth-effect"> <a href="#" title="Full Image"><img src="/web-developer/css/images/4.jpg" /></a> <div class="mask"></div> </div> |
Используя только класс mask
, в сочетании с border-radius
будет действительно красивый эффект при наведении на изображения.
Я также использовал visibility
, которое позволяет создать в конце переход transition
.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 |
.fourth-effect .mask { position:absolute; /* Center the mask */ top:50px; left:100px; cursor:pointer; border-radius: 50px; border-width: 50px; display: inline-block; height: 100px; width: 100px; border: 50px solid rgba(0, 0, 0, 0.7); box-sizing:border-box; opacity:1; visibility:visible; transform:scale(4); transition:all 0.3s ease-in-out; } .fourth-effect:hover .mask { opacity: 0; border:0px solid rgba(0,0,0,0.7); visibility:hidden; } |
Последний пример имеет такой же код, как и четвертый пример, только с разницей в названии второго класса, вместо fourth-effect
на fifth-effect
.
1 2 3 4 |
<div class="view fifth-effect"> <a href="#" title="Full Image"><img src="/web-developer/css/images/5.jpg" /></a> <div class="mask"></div> </div> |
Кроме того здесь мы будем использовать border
вместе с visibility
. Как видите, вся хитрость заключается в том, чтобы изменить свойство border
.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 |
.fifth-effect img { opacity:0.2; transition: all 0.3s ease-in; } .fifth-effect .mask { cursor:pointer; opacity:1; visibility:visible; border:100px solid rgba(0,0,0,0.7); box-sizing:border-box; transition: all 0.4s cubic-bezier(0.940, 0.850, 0.100, 0.620); } .fifth-effect:hover .mask { border:0px double rgba(0,0,0,0.7); opacity:0; visibility:hidden; } .fifth-effect:hover img { opacity:1; } |
Заключение
Я надеюсь, что вам понравились эти эксперименты, а также эффект при наведении, который вы можете легко использовать на своем сайте, сделав его ещё более привлекательным для пользователей. Но прежде всего я надеюсь, этот урок вдохновил!
Спасибо за внимание!
Данный урок подготовлен для вас командой сайта vladmaxi.net
Источник урока:
Перевел: Владислав Бондаренко
http://webavtopro.ru/ @
У меня почему-то эффект под картинкой.
/
Каким браузером пользуетесь?
http://webavtopro.ru/ @
Хромом
/
Работу в хроме (Версия 34.0.1847.116) проверил – всё работает чётко. Возможно, вам необходимо обновить версию браузера, если таковое действие не сделано, либо попробовать очистить кэш и cookies браузера.
http://webavtopro.ru/ @
обновил версию php, правда уже другой эффект прикрутил, возможно в ней было дело