<!DOCTYPE html>
<html lang="pt-br">

<head>
	<meta charset="UTF-8" />
	<title>Efeitos de Hover em Círculos com CSS Transition</title>
	<meta name="author" content="HTML e CSS Pro" />

	<link href='http://fonts.googleapis.com/css?family=Open+Sans:300,700' rel='stylesheet' type='text/css' />
	<link rel="stylesheet" type="text/css" href="css/style.css" />
</head>

<body>
	<header class="header">
		<h1>Efeitos de Hover em Círculos com CSS Transition</h1>
	</header>

	<ul class="circulo">
		<li>
			<div class="circulo-item">
				<div class="circulo-info">
					<h2>Criando Menu Deslizante</h2>
					<p>
						<span>Acesse no Blog</span>
						<a href="https://www.htmlecsspro.com/artigo/criando-menu-deslizante-com-html-css-e-jquery" target="_blank">HTML e CSS Pro</a>
					</p>
				</div>
			</div>
		</li>
		<li>
			<div class="circulo-item">
				<div class="circulo-info">
					<h2>Sites Estáticos e Dinâmicos</h2>
					<p>
						<span>Acesse no Blog</span>
						<a href="https://www.htmlecsspro.com/artigo/sites-estaticos-e-dinamicos" target="_blank">HTML e CSS Pro</a>
					</p>
				</div>
			</div>
		</li>
		<li>
			<div class="circulo-item">
				<div class="circulo-info">
					<h2>Termos e Definições do CSS</h2>
					<p>
						<span>Acesse no Blog</span>
						<a href="https://www.htmlecsspro.com/artigo/termos-e-definicoes-do-css" target="_blank">HTML e CSS Pro</a>
					</p>
				</div>
			</div>
		</li>
	</ul>
</body>

</html>
*{
	margin: 0; 
	padding: 0;
}
body{
	background: #2c3e50;
	color: #fff;
	font-family: 'Open Sans', Arial, sans-serif;
}

.header h1{
	font-size: 20px;
	text-align: center;
	padding: 20px 0;
}

.circulo{
	list-style: none;
	text-align: center;
}
.circulo li{
	width: 220px;
	height: 220px;
	display: inline-block;
	margin: 20px;
}

.circulo li:nth-child(1) .circulo-item{
	background: url(https://image.ibb.co/bwT7vT/1.png);
}
.circulo li:nth-child(2) .circulo-item{
	background: url(https://image.ibb.co/hrd7vT/2.png);
}
.circulo li:nth-child(3) .circulo-item{
	background: url(https://image.ibb.co/iYFWN8/3.png);
}
.circulo-item{
	width: 100%;
	height: 100%;
	border-radius: 50%;
	box-shadow: inset 0 0 0 16px rgba(255,255,255,.6);
	position: relative;
	transition: all .4s ease-in-out;
	-webkit-transition: all .4s ease-in-out;
}

.circulo-info{ 
	position: absolute;
	width: inherit;
	height: inherit;
	border-radius: 50%;
	background: rgba(63,147,147,.9);	
	transition: all .4s ease-in-out;
	-webkit-transition: all .4s ease-in-out;
	transform: scale(0);
	-webkit-transform: scale(0);
	opacity: 0;
}
.circulo-info h2{ 
	font-size: 22px;
	text-transform: uppercase;
	margin: 0 30px;
	padding: 45px 0 0 0;
}
.circulo-info p{ 
	font-size: 14px;
	font-style: italic;
	border-top: 1px solid #eee;
	padding: 10px 5px;
	margin: 0 30px;
	opacity: 0;
	transition: all 1s ease-in-out 0.4s;
	-webkit-transition: all 1s ease-in-out 0.4s;
}
.circulo-info p a{ 
	color: #eee;
	display: block;
	font-weight: bold;
	text-transform: uppercase;
	text-decoration: none;
}
.circulo-info p a:hover{ 
	color: #fff222;
}

.circulo-item:hover{
	box-shadow: inset 0 0 0 0 rgba(255,255,255,.6);
}
.circulo-item:hover .circulo-info{
	transform: scale(1);
	-webkit-transform: scale(1);
	opacity: 1;
}
.circulo-item:hover .circulo-info p{
	opacity: 1;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.