/ Скрипты / Красивые hover эффекты

Красивые hover эффекты

Автор: delux · Опубликовано 19.05.2016 · Обновлено 25.02.2019

Семь разных красивых hover эффектов для изображений — Caption Hover EffectsКак реализовать:

1. Разметка html

<ul class="grid cs-style-1">
	<li>
		<figure>
			<img src="images/1.png" alt="img01">
			<figcaption>
				<h3>Camera</h3>
				<span>Jacob Cummings</span>
				<a href="http://dribbble.com/shots/1115632-Camera">Take a look</a>
			</figcaption>
		</figure>
	</li>
	<li>
		<figure>
			<!-- ... -->
		</figure>
	</li>
	<!-- ... -->
</ul>

<li>

<h3>Camera</h3>

<span>Jacob Cummings</span>

</figcaption>

</figure>

</li>

<li>

</figure>

</li>

</ul>

Где cs-style-1 — номер эффекта, поставите cs-style-2 — Будет эффект #2

2. Базовые стили CSS

.grid {
	padding: 20px 20px 100px 20px;
	max-width: 1300px;
	margin: 0 auto;
	list-style: none;
	text-align: center;
}

.grid li {
	display: inline-block;
	width: 440px;
	margin: 0;
	padding: 20px;
	text-align: left;
	position: relative;
}

.grid figure {
	margin: 0;
	position: relative;
}

.grid figure img {
	max-width: 100%;
	display: block;
	position: relative;
}

.grid figcaption {
	position: absolute;
	top: 0;
	left: 0;
	padding: 20px;
	background: #2c3f52;
	color: #ed4e6e;
}

.grid figcaption h3 {
	margin: 0;
	padding: 0;
	color: #fff;
}

.grid figcaption span:before {
	content: 'by ';
}

.grid figcaption a {
	text-align: center;
	padding: 5px 10px;
	border-radius: 2px;
	display: inline-block;
	background: #ed4e6e;
	color: #fff;
}

@media screen and (max-width: 31.5em) {
	.grid {
		padding: 10px 10px 100px 10px;
	}
	.grid li {
		width: 100%;
		min-width: 300px;
	}
}

.grid {

padding: 20px 20px 100px 20px;

max-width: 1300px;

margin: 0 auto;

list-style: none;

text-align: center;

}

.grid li {

display: inline-block;

width: 440px;

margin: 0;

padding: 20px;

text-align: left;

position: relative;

}

.grid figure {

margin: 0;

position: relative;

}

.grid figure img {

max-width: 100%;

display: block;

position: relative;

}

.grid figcaption {

position: absolute;

top: 0;

left: 0;

padding: 20px;

background: #2c3f52;

color: #ed4e6e;

}

.grid figcaption h3 {

margin: 0;

padding: 0;

color: #fff;

}

.grid figcaption span:before {

content: 'by ';

}

.grid figcaption a {

text-align: center;

padding: 5px 10px;

border-radius: 2px;

display: inline-block;

background: #ed4e6e;

color: #fff;

}

@media screen and (max-width: 31.5em) {

.grid {

padding: 10px 10px 100px 10px;

}

.grid li {

width: 100%;

min-width: 300px;

}

Ну, а теперь рассмотрим каждый эффект отдельно

1. Эффект #1

Стили CSS

.cs-style-1 figcaption {
	height: 100%;
	width: 100%;
	opacity: 0;
	text-align: center;
	backface-visibility: hidden;
	transition: transform 0.3s, opacity 0.3s;
}

.no-touch .cs-style-1 figure:hover figcaption,
.cs-style-1 figure.cs-hover figcaption {
	opacity: 1;
	transform: translate(15px, 15px);
}

.cs-style-1 figcaption h3 {
	margin-top: 70px;
}

.cs-style-1 figcaption span {
	display: block;
}

.cs-style-1 figcaption a {
	margin-top: 30px;
}

.cs-style-1 figcaption {

height: 100%;

width: 100%;

opacity: 0;

text-align: center;

backface-visibility: hidden;

transition: transform 0.3s, opacity 0.3s;

}

.no-touch .cs-style-1 figure:hover figcaption,

.cs-style-1 figure.cs-hover figcaption {

opacity: 1;

transform: translate(15px, 15px);

}

.cs-style-1 figcaption h3 {

margin-top: 70px;

}

.cs-style-1 figcaption span {

display: block;

}

.cs-style-1 figcaption a {

margin-top: 30px;

}

2. Эффект #2

Стили CSS

.cs-style-2 figure img {
	z-index: 10;
	transition: transform 0.4s;
}

.no-touch .cs-style-2 figure:hover img,
.cs-style-2 figure.cs-hover img {
	transform: translateY(-90px);
}

.cs-style-2 figcaption {
	height: 90px;
	width: 100%;
	top: auto;
	bottom: 0;
}

.cs-style-2 figcaption a {
	position: absolute;
	right: 20px;
	top: 30px;
}

.cs-style-2 figure img {

z-index: 10;

transition: transform 0.4s;

}

.no-touch .cs-style-2 figure:hover img,

.cs-style-2 figure.cs-hover img {

transform: translateY(-90px);

}

.cs-style-2 figcaption {

height: 90px;

width: 100%;

top: auto;

bottom: 0;

}

.cs-style-2 figcaption a {

position: absolute;

right: 20px;

top: 30px;

}

3. Эффект #3

Стили CSS

.cs-style-3 figure {
	overflow: hidden;
}

.cs-style-3 figure img {
	transition: transform 0.4s;
}

.no-touch .cs-style-3 figure:hover img,
.cs-style-3 figure.cs-hover img {
	transform: translateY(-50px);
}

.cs-style-3 figcaption {
	height: 100px;
	width: 100%;
	top: auto;
	bottom: 0;
	opacity: 0;
	transform: translateY(100%);
	transition: transform 0.4s, opacity 0.1s 0.3s;
}

.no-touch .cs-style-3 figure:hover figcaption,
.cs-style-3 figure.cs-hover figcaption {
	opacity: 1;
	transform: translateY(0px);
	transition: transform 0.4s, opacity 0.1s;
}

.cs-style-3 figcaption a {
	position: absolute;
	bottom: 20px;
	right: 20px;
}

.cs-style-3 figure {

overflow: hidden;

}

.cs-style-3 figure img {

transition: transform 0.4s;

}

.no-touch .cs-style-3 figure:hover img,

.cs-style-3 figure.cs-hover img {

transform: translateY(-50px);

}

.cs-style-3 figcaption {

height: 100px;

width: 100%;

top: auto;

bottom: 0;

opacity: 0;

transform: translateY(100%);

transition: transform 0.4s, opacity 0.1s 0.3s;

}

.no-touch .cs-style-3 figure:hover figcaption,

.cs-style-3 figure.cs-hover figcaption {

opacity: 1;

transform: translateY(0px);

transition: transform 0.4s, opacity 0.1s;

}

.cs-style-3 figcaption a {

position: absolute;

bottom: 20px;

right: 20px;

}

4. Эффект #4

Стили CSS

.cs-style-4 li {
	perspective: 1700px;
	perspective-origin: 0 50%;
}

.cs-style-4 figure {
	transform-style: preserve-3d;
}

.cs-style-4 figure > div {
	overflow: hidden;
}

.cs-style-4 figure img {
	transition: transform 0.4s;
}

.no-touch .cs-style-4 figure:hover img,
.cs-style-4 figure.cs-hover img {
	transform: translateX(25%);
}

.cs-style-4 figcaption {
	height: 100%;
	width: 50%;
	opacity: 0;
	backface-visibility: hidden;
	transform-origin: 0 0;
	transform: rotateY(-90deg);
	transition: transform 0.4s, opacity 0.1s 0.3s;
}

.no-touch .cs-style-4 figure:hover figcaption,
.cs-style-4 figure.cs-hover figcaption {
	opacity: 1;
	transform: rotateY(0deg);
	transition: transform 0.4s, opacity 0.1s;
}

.cs-style-4 figcaption a {
	position: absolute;
	bottom: 20px;
	right: 20px;
}

.cs-style-4 li {

perspective: 1700px;

perspective-origin: 0 50%;

}

.cs-style-4 figure {

transform-style: preserve-3d;

}

.cs-style-4 figure > div {

overflow: hidden;

}

.cs-style-4 figure img {

transition: transform 0.4s;

}

.no-touch .cs-style-4 figure:hover img,

.cs-style-4 figure.cs-hover img {

transform: translateX(25%);

}

.cs-style-4 figcaption {

height: 100%;

width: 50%;

opacity: 0;

backface-visibility: hidden;

transform-origin: 0 0;

transform: rotateY(-90deg);

transition: transform 0.4s, opacity 0.1s 0.3s;

}

.no-touch .cs-style-4 figure:hover figcaption,

.cs-style-4 figure.cs-hover figcaption {

opacity: 1;

transform: rotateY(0deg);

transition: transform 0.4s, opacity 0.1s;

}

.cs-style-4 figcaption a {

position: absolute;

bottom: 20px;

right: 20px;

}

5. Эффект #5

Стили CSS

.cs-style-5 figure img {
	z-index: 10;
	transition: transform 0.4s;
}

.no-touch .cs-style-5 figure:hover img,
.cs-style-5 figure.cs-hover img {
	transform: scale(0.4);
}

.cs-style-5 figcaption {
	height: 100%;
	width: 100%;
	opacity: 0;
	transform: scale(0.7);
	backface-visibility: hidden;
	transition: transform 0.4s, opacity 0.4s;
}

.no-touch .cs-style-5 figure:hover figcaption,
.cs-style-5 figure.cs-hover figcaption {
	transform: scale(1);
	opacity: 1;
}

.cs-style-5 figure a {
	position: absolute;
	bottom: 20px;
	right: 20px;
}

.cs-style-5 figure img {

z-index: 10;

transition: transform 0.4s;

}

.no-touch .cs-style-5 figure:hover img,

.cs-style-5 figure.cs-hover img {

transform: scale(0.4);

}

.cs-style-5 figcaption {

height: 100%;

width: 100%;

opacity: 0;

transform: scale(0.7);

backface-visibility: hidden;

transition: transform 0.4s, opacity 0.4s;

}

.no-touch .cs-style-5 figure:hover figcaption,

.cs-style-5 figure.cs-hover figcaption {

transform: scale(1);

opacity: 1;

}

.cs-style-5 figure a {

position: absolute;

bottom: 20px;

right: 20px;

}

6. Эффект #6

Стили CSS

.cs-style-6 figure img {
	z-index: 10;
	transition: transform 0.4s;
}

.no-touch .cs-style-6 figure:hover img,
.cs-style-6 figure.cs-hover img {
	transform: translateY(-50px) scale(0.5);
}

.cs-style-6 figcaption {
	height: 100%;
	width: 100%;
}

.cs-style-6 figcaption h3 {
	margin-top: 60%;
}

.cs-style-6 figcaption a {
	position: absolute;
	bottom: 20px;
	right: 20px;
}

.cs-style-6 figure img {

z-index: 10;

transition: transform 0.4s;

}

.no-touch .cs-style-6 figure:hover img,

.cs-style-6 figure.cs-hover img {

transform: translateY(-50px) scale(0.5);

}

.cs-style-6 figcaption {

height: 100%;

width: 100%;

}

.cs-style-6 figcaption h3 {

margin-top: 60%;

}

.cs-style-6 figcaption a {

position: absolute;

bottom: 20px;

right: 20px;

}

7. Эффект #7

Стили CSS

.cs-style-7 li:first-child { z-index: 6; }
.cs-style-7 li:nth-child(2) { z-index: 5; }
.cs-style-7 li:nth-child(3) { z-index: 4; }
.cs-style-7 li:nth-child(4) { z-index: 3; }
.cs-style-7 li:nth-child(5) { z-index: 2; }
.cs-style-7 li:nth-child(6) { z-index: 1; }

.cs-style-7 figure img {
	z-index: 10;
}

.cs-style-7 figcaption {
	height: 100%;
	width: 100%;
	opacity: 0;
	backface-visibility: hidden;
	box-shadow: 0 0 0 0px #2c3f52;
	transition: opacity 0.3s, height 0.3s, box-shadow 0.3s;
}

.no-touch .cs-style-7 figure:hover figcaption,
.cs-style-7 figure.cs-hover figcaption {
	opacity: 1;
	height: 130%;
	box-shadow: 0 0 0 10px #2c3f52;
}

.cs-style-7 figcaption h3 {
	margin-top: 86%;
}

.cs-style-7 figcaption h3,
.cs-style-7 figcaption span,
.cs-style-7 figcaption a {
	opacity: 0;
	transition: opacity 0s;
}

.cs-style-7 figcaption a {
	position: absolute;
	bottom: 20px;
	right: 20px;
}

.no-touch .cs-style-7 figure:hover figcaption h3,
.no-touch .cs-style-7 figure:hover figcaption span,
.no-touch .cs-style-7 figure:hover figcaption a,
.cs-style-7 figure.cs-hover figcaption h3,
.cs-style-7 figure.cs-hover figcaption span,
.cs-style-7 figure.cs-hover figcaption a {
	transition: opacity 0.3s 0.2s;
	opacity: 1;
}

.cs-style-7 li:first-child { z-index: 6; }

.cs-style-7 li:nth-child(2) { z-index: 5; }

.cs-style-7 li:nth-child(3) { z-index: 4; }

.cs-style-7 li:nth-child(4) { z-index: 3; }

.cs-style-7 li:nth-child(5) { z-index: 2; }

.cs-style-7 li:nth-child(6) { z-index: 1; }

.cs-style-7 figure img {

z-index: 10;

}

.cs-style-7 figcaption {

height: 100%;

width: 100%;

opacity: 0;

backface-visibility: hidden;

box-shadow: 0 0 0 0px #2c3f52;

transition: opacity 0.3s, height 0.3s, box-shadow 0.3s;

}

.no-touch .cs-style-7 figure:hover figcaption,

.cs-style-7 figure.cs-hover figcaption {

opacity: 1;

height: 130%;

box-shadow: 0 0 0 10px #2c3f52;

}

.cs-style-7 figcaption h3 {

margin-top: 86%;

}

.cs-style-7 figcaption h3,

.cs-style-7 figcaption span,

.cs-style-7 figcaption a {

opacity: 0;

transition: opacity 0s;

}

.cs-style-7 figcaption a {

position: absolute;

bottom: 20px;

right: 20px;

}

.no-touch .cs-style-7 figure:hover figcaption h3,

.no-touch .cs-style-7 figure:hover figcaption span,

.no-touch .cs-style-7 figure:hover figcaption a,

.cs-style-7 figure.cs-hover figcaption h3,

.cs-style-7 figure.cs-hover figcaption span,

.cs-style-7 figure.cs-hover figcaption a {

transition: opacity 0.3s 0.2s;

opacity: 1;

}

Готово.

Смотреть DEMO Скачать исходник

delux

Предлагаю делиться опытом в сфере сайтостроения!

Добавить комментарий Отменить ответ

Этот сайт использует Akismet для борьбы со спамом. Узнайте, как обрабатываются ваши данные комментариев.

Exact matches only

Search in title

Search in content

Search in excerpt

Search in posts

Search in pages

Красивые hover эффекты

Ну, а теперь рассмотрим каждый эффект отдельно

Читайте также:

Добавить комментарий Отменить ответ

Счетчик

Мета

Случайные записи

Красивые hover эффекты

Ну, а теперь рассмотрим каждый эффект отдельно

Читайте также:

Просмотр видео в всплывающем окне

Расширенная адаптивная навигация

Страница вопрос-ответ (FAQ)

Добавить комментарий Отменить ответ

Счетчик

Мета

Случайные записи