Создание круговых ховер эффектов на CSS

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

Итак, давайте начнем!

 

HTML

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

<section class="main">
			
				<ul class="ch-grid">
					<li>
						<div class="ch-item ch-img-1">
							<div class="ch-info">
								<h3>Лучшие уроки</h3>
								<p>Хотите скачать? <a href="http://roothelp.ru/">Ищите на ROOTHELP</a></p>
							</div>
						</div>
					</li>
					<li>
						<div class="ch-item ch-img-2">
							<div class="ch-info">
								<h3>Лучшие уроки</h3>
								<p>Хотите скачать? <a href="http://roothelp.ru/">Ищите на ROOTHELP</a></p>
							</div>
						</div>
					</li>
					<li>
						<div class="ch-item ch-img-3">
							<div class="ch-info">
								<h3>Лучшие уроки</h3>
								<p>Хотите скачать? <a href="http://roothelp.ru/">Ищите на ROOTHELP</a></p>
							</div>
						</div>
					</li>
				</ul>
				
			</section>

 

Мы могли бы отображать изображения в верстке, но раз уж создаем эффекты на чистом CSS, то зададим картинки фоном при помощи классов. Теперь, давайте сделаем некоторые эффекты при наведении!

 

CSS

Общие стили списка и элементов списка:

.ch-grid {
	margin: 20px 0 0 0;
	padding: 0;
	list-style: none;
	display: block;
	text-align: center;
	width: 100%;
}

.ch-grid:after,
.ch-item:before {
	content: '';
    display: table;
}

.ch-grid:after {
	clear: both;
}

.ch-grid li {
	width: 220px;
	height: 220px;
	display: inline-block;
	margin: 20px;
}

 

Центрировать элементы будем при помощи display:inline-block для дочерних блоков и text-align:center для родительского блока.

Так как никаких сверхъестественных знаний CSS тут не надо и в основном всю красоту и интерактивность дают свойства transition и transform, то я опишу только один из примеров.

Демо 1.

В первом примере, мы увидим описание, как и везде, при наведении на круг.

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

 

.ch-item {
	width: 100%;
	height: 100%;
	border-radius: 50%;
	overflow: hidden;
	position: relative;
	cursor: default;
	box-shadow: 
		inset 0 0 0 16px rgba(255,255,255,0.6),
		0 1px 2px rgba(0,0,0,0.1);
	transition: all 0.4s ease-in-out;
}

 

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

 

.ch-img-1 { 
	background-image: url(../images/1.png);
}

.ch-img-2 { 
	background-image: url(../images/2.png);
}

.ch-img-3 { 
	background-image: url(../images/3.png);
}

 

Элемент описания будет с абсолютным позиционированием, зададим ему полупрозрачный фон установив значение RGBA. Непрозрачность и масштабирование выставим в 0.

 

.ch-info {
	position: absolute;
	background: rgba(63,147,147, 0.8);
	width: inherit;
	height: inherit;
	border-radius: 50%;
	overflow: hidden;
	opacity: 0;
	transition: all 0.4s ease-in-out;
	transform: scale(0);
}

 

Тексту заголовков зададим внутренние и внешние отступы, а также тень.

 

.ch-info h3 {
	color: #fff;
	text-transform: uppercase;
	letter-spacing: 2px;
	font-size: 22px;
	margin: 0 30px;
	padding: 45px 0 0 0;
	height: 140px;
	font-family: 'Open Sans', Arial, sans-serif;
	text-shadow: 
		0 0 1px #fff, 
		0 1px 2px rgba(0,0,0,0.3);
}

 

Абзацам также зададим непрозрачность 0, но будем еще использовать свойство transition, так как хотим делать все с задержкой.

 

.ch-info p {
	color: #fff;
	padding: 10px 5px;
	font-style: italic;
	margin: 0 30px;
	font-size: 12px;
	border-top: 1px solid rgba(255,255,255,0.5);
	opacity: 0;
	transition: all 1s ease-in-out 0.4s;
}

 

Ссылки будут заглавными буквами, и мы сделаем их цвет при наведении желтым.

 

.ch-info p a {
	display: block;
	color: rgba(255,255,255,0.7);
	font-style: normal;
	font-weight: 700;
	text-transform: uppercase;
	font-size: 9px;
	letter-spacing: 1px;
	padding-top: 4px;
	font-family: 'Open Sans', Arial, sans-serif;
}

.ch-info p a:hover {
	color: rgba(255,242,34, 0.8);
}

 

А теперь, самое интересное - действие наведении!
Будем анимировать тень блока от 16px к 1px.

 

.ch-item:hover {
	box-shadow: 
		inset 0 0 0 1px rgba(255,255,255,0.1),
		0 1px 2px rgba(0,0,0,0.1);
}

 

Описание будет исчезать, а масштаб приближаться к 1.

 

.ch-item:hover .ch-info {
	transform: scale(1);
	opacity: 1;
}

 

И описание будет также просто исчезать (но с задержкой).

 

.ch-item:hover .ch-info p {
	opacity: 1;
}

 

Ну вот по первому примеру уже все! Домашним заданием каждому будет разобраться в следующих не сложных примерах! Всем добра:)