Красивые эффекты при наведений мыши CSS3 — Второй урок

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

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

Перепишем стиль для маски.

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

Добавляем стили для события Hover

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

Что будет происходить?

• При наведение на элемент будет накладываться маска
• После наложения маски будут накладываться остальные элементы

Готовый пример — Скачать