CSS3-эффект при наведении на изображение в меню навигации

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

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

В предлагаемом примере отображаются в слайдере миниатюры предыдущей и следующей картинки. Эффект реализуется в CSS3 с помощью функции transitions.

Верстка

Для осуществления CSS3-эффекта предлагаем следующую структуру навигации:

1
2
3
4
5
6
7
8
9
10

<div class="cn-nav">
	<a href="#" class="cn-nav-prev">
		<span>Previous</span>
		<div style="background-image:url(../images/thumbs/1.jpg);"></div>
	</a>
	<a href="#" class="cn-nav-next">
		<span>Next</span>
		<div style="background-image:url(../images/thumbs/3.jpg);"></div>
	</a>
</div>

В предлагаемой демонстрационной версии мы разработаем шаблон iQuery и встроим в него миниатюры для предыдущей и следующей картинки в слайдере. Однако, прежде чем показать эффект развертки круга, нужно показать следующий элемент.

CSS-код

Предлагаем рассмотреть возможность добавления стилизации к навигации. Предположим, что у вас будет иметься относительный контейнер, зададим элементу ссылки позицию absolute. Ширина и высота составит 70 пикселей, поэтому у вас будет предостаточно места для реализации эффекта наведения:

1
2
3
4
5
6
7
8
9
10
11
12

.cn-nav > a{
	position: absolute;
	top: 0px;
	height: 70px;
	width: 70px;
}
a.cn-nav-prev{
	left: 0px;
}
a.cn-nav-next{
	right: 0px;
}

Разместим стрелки размером в 46 пикселей в ширину и высоту в роли фона с помощью элемента span. Для создания круга надо задать параметр border-radius со значением в половину ширины/высоты. Благодаря приему с 50% отрицательной маржины передвинем его в середине элемента ссылки. Затем назначим переход, учитывающий все параметры и длящийся 400 мс:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

.cn-nav a span{
	width: 46px;
	height: 46px;
	display: block;
	text-indent: -9000px;
	-moz-border-radius: 23px;
	-webkit-border-radius: 23px;
	border-radius: 23px;
	cursor: pointer;
	opacity: 0.9;
	position: absolute;
	top: 50%;
	left: 50%;
	background-size: 17px 25px;
	margin: -23px 0 0 -23px;
	-webkit-transition: all 0.4s ease;
	-moz-transition: all 0.4s ease;
	-o-transition: all 0.4s ease;
	-ms-transition: all 0.4s ease;
	transition: all 0.4s ease;
}

Левая и правая стрелки в качестве фонового изображения элемента span:

1
2
3
4
5
6

.cn-nav a.cn-nav-prev span{
	background: #666 url(../images/prev.png) no-repeat center center;
}
.cn-nav a.cn-nav-next span{
	background: #666 url(../images/next.png) no-repeat center center;
}

В роли фоновой картинки зададим Div с миниатюрой высотой и шириной в 0 пикселей. Кроме того, заданное абсолютное позиционирование разрешит его поместить в середине элемента ссылки. Марины и border-radius будут иметь начальные значения 0. Фоновая картинка зальет элемент полностью, потому что параметру background-size зададим 100%-ное значение высоты и ширины. Переход для этого элемента с функцией ease-out учтет все заданные параметры и будет длиться 200 мс:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

.cn-nav a div{
	width: 0px;
	height: 0px;
	position: absolute;
	top: 50%;
	left: 50%;
	overflow: hidden;
	background-size: 100% 100%;
	background-position: center center;
	background-repeat: no-repeat;
	margin: 0px;
	-moz-border-radius: 0px;
	-webkit-border-radius: 0px;
	border-radius: 0px;
	-webkit-transition: all 0.2s ease-out;
	-moz-transition: all 0.2s ease-out;
	-o-transition: all 0.2s ease-out;
	-ms-transition: all 0.2s ease-out;
	transition: all 0.2s ease-out;
}

Далее определимся с внешним видом элементов при наведении.

Высота и ширина увеличатся до 100 пикселей, и нам нужно установить отрицательные маржины и углы с закруглением в половину данного значения. Чуть-чуть увеличим размер фоновой картинки, поменяем плотность изображения и цвет фона:

1
2
3
4
5
6
7
8
9
10
11

.cn-nav a:hover span{
	width: 100px;
	height: 100px;
	-moz-border-radius: 50px;
	-webkit-border-radius: 50px;
	border-radius: 50px;
	opacity: 0.6;
	margin: -50px 0 0 -50px;
	background-size: 22px 32px;
	background-color:#a8872d;
}

Теперь div-элемент для небольшой миниатюры расширится до 90 пикселей, поэтому в любом случае мы увидим элемент span, появляющийся в роли границы миниатюры. Кроме того, установим закругленные углы в половину ширины элемента, отрицательные маржины и увеличим размер фона:

1
2
3
4
5
6
7
8
9

.cn-nav a:hover div{
	width: 90px;
	height: 90px;
	background-size: 120% 120%;
	margin: -45px 0 0 -45px;
	-moz-border-radius: 45px;
	-webkit-border-radius: 45px;
	border-radius: 45px;
}

И вот, великолепный эффект реализован только благодаря CSS3! Ознакомьтесь с демо и вы увидите, как это смотрятся в слайдере миниатюры предыдущей и следующей картинки.

Надеемся, что вам понравился этот эффект и вы найдете ему интересное применение.

Посмотреть, как это все работает, можно здесь