Создаем hover эффекты при помощи CSS3. Часть 2.

Главная

Статьи

Верстка сайтов

16.11.2011 16:01

css3 hover effects

В этой статье я покажу вам новые пять примеров hover эффектов с использованием различных свойств CSS. В данных примерах основной акцент сделан на свойсте border. Предыдущие же примеры вы можете увидеть тут.

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

HTML

Эта простая разметка позволит нам делать эти эффекты. Как вы можете видеть в коде ниже, мы создаем родительский блок с классом view, и с content внутри. Затем мы создаем класс mask, где мы будем применять CSS3 переходы, чтобы получить эффект при наведении. В последних примерах этот синтаксис незначительно изменится в зависимости от эффекта, который мы хотим получить.

<div class="view">  

 <img src="images/1.jpg" />  

 <div class="mask"></div>  

 <div class="content">  

 <a href="#" class="info" title="Full Image">Full Image</a>  

 </div>  

</div>

CSS

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

.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;

}

Пример 1

css3 hover effects 1 example

HTML

Для первого примера, добавим в класс effect в элемент с классом view:

<div class="view effect">  

 <img src="images/1.jpg" />  

 <div class="mask"></div>  

 <div class="content">  

 <a href="#" class="info" title="Full Image">Full Image</a>  

 </div>  

</div>

CSS

Как мы видим, создавать анимацию очень просто, для экономии места я опустил префиксы (-moz-,-webkit-и т. д.), но вы найдете все префиксы в файле.

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

.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);

}

Пример 2

css3 hover effects 2 example

HTML

Синтаксис в данном случае немного отличается, мы добавляем специальный класс second-effect к классу view, а также мы добавляем ссылку внутри блока с классом mask.

<div class="view second-effect">  

 <img src="images/2.jpg" />  

 <div class="mask">  

 <a href="#" class="info" title="Full Image">Full Image</a>  

 </div>  

</div>

CSS

В этом примере мы будем работать с параметрами свойства border. Я также использовал box-sizing. CSS свойство box-sizing используется, для изменения алгоритма расчета ширины и высоты элемента.

.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;

}

Пример 3

css3 hover effects 3 example

HTML

Добавляем к классу view специальный класс third-effect.

<div class="view third-effect">  

 <img src="images/3.jpg" />  

 <div class="mask">  

 <a href="#" class="info" title="Full Image">Full Image</a>  

 </div>  

</div>

CSS

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

.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;

}

Пример 4

css3 hover effects 4 example

HTML

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

<div class="view fourth-effect">  

 <a href="#" title="Full Image"><img src="images/4.jpg" /></a>  

 <div class="mask"></div>  

</div>

CSS

Используя только класс mask, в сочетании со свойством border-radius, позволяет нам создать действительно красивый эффект при наведении курсора.

.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;

}

Пример 5

css3 hover effects 5 example

HTML

Последний пример имеет такую же разметку, как и в четвертый, с той лишь разницей, что мы добавляем класс fifth-effect, а не fourth-effect.

<div class="view fifth-effect">  

 <a href="#" title="Full Image"><img src="images/5.jpg" /></a>  

 <div class="mask"></div>  

</div>

CSS

Также здесь мы будем использовать свойство border со свойством visibility. Как вы можете видеть, трюк в том, что мы изменяем свойство border с solid на double.

.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;

}