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

Пожалуйста, обратите внимание, что эти примеры будут корректно работать только в современных браузерах, которые поддерживают 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;
}

Заключение

Я надеюсь, что вам понравились эти эксперименты, но прежде всего я надеюсь, что они вдохновят вас на собственные эксперименты. Спасибо.