Оригинальные Hover Effects с помощью CSS3

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

Разметки

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

Внутри view вставить элемент с class mask, который будет отвечать за наши эффекты, управляемые CSS3, и внутри него мы поставим заголовок, описание и ссылку на полный размер. (Для некоторых примеров, мы должны добавить маску в виде отдельного элемента и обернуть описание в div с class 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

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

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

И теперь мы будем смотреть на эффекты.

Пример 1

Мы будем добавлять специальный класс для каждого примера. Например (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;
}

И вот сердце нашего эффекта. Когда вы перемещаете курсор на изображение, мы можем использовать свойство задержки для эмуляции простой анимации. Переход задержки, что мы используем в классе наведении могут быть изменены, чтобы отличаться от нормального класса. В этом примере мы не использовали каких-либо задержек в обычном классе; но мы добавили задержку при наведении курсора мыши, который начнёт переход немного позже. Перемещение мыши вне, значение по умолчанию 0 sec будет применяться, и “reverse” будет быстрее.

.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

Во втором примере мы добавим специальный класс 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 будет иметь различные атрибуты, чтобы удовлетворить наши эффекты, на самом деле мы собираемся применить преобразование свойств (перевод и повернуть) и сделает квадрат из него. Описание элементов будут переведены, то есть перемещается так, что мы можем установите их при наведении курсора мыши:

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

Элементы описания будут приходить с небольшим опозданием:

.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

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

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

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

.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

 Здесь, в четвертом примере мы выполним простой “Zoom Out” изображение и увеличение контента с вращением, все благодаря шкале преобразования. Мы устанавливаем задержку перехода 0,2 с для стиля изображения, но при наведении мы будем говорить, что это 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

В этом пятом примере мы будем использовать переход содержимого вместе с  transition-timing-function 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;
}

Оригинал /  Перевод

Продолжение здесь.