A CodePen by Thulio Philipe.

A-Pen-by-Thulio-Philipe.markdown

A Pen by Thulio Philipe

A Pen by Thulio Philipe on CodePen.

License.

index.html

	<div class="all" id="membro-01">
		<figure>
			<a class="box-equipe" href="javascript:;">
				<p class="nome-membro-equipe">Nome do Caboco</p>
			</a>
		</figure>
	</div>

	<div class="all" id="membro-02">
		<figure>
			<a class="box-equipe" href="javascript:;">
				<p class="nome-membro-equipe">Nome do Caboco</p>
			</a>
		</figure>
	</div>

	<div class="all" id="membro-03">
		<figure>
			<a class="box-equipe" href="javascript:;">
				<p class="nome-membro-equipe">Nome do Caboco</p>
			</a>
		</figure>
	</div>

	<div class="all" id="membro-04">
		<figure>
			<a class="box-equipe" href="javascript:;">
				<p class="nome-membro-equipe">Nome do Caboco</p>
			</a>
		</figure>
	</div>

style.css

.all{
	width: 225px;
	height: 225px;
	float: left;
	margin-left: 10px;
	overflow: hidden;
	background-color: black;
}

.all:hover .box-equipe{
	margin-top: 140px;
}

a.box-equipe{
  cursor: pointer;
	display: block;
	text-decoration: none;
	font-family: calibri;
	text-align: center;
	margin-top: 230px;
	color: #fff;

	-webkit-transition: all 0.2s ease;
	-moz-transition: all 0.2s ease;
	-ms-transition: all 0.2s ease;
	-o-transition: all 0.2s ease;
	transition: all 0.2s ease;
}

#membro-01,#membro-02,
#membro-03,#membro-04{
	background-color: black;

	-webkit-transition: opacity 0.2s linear;
	-moz-transition: opacity 0.2s linear;
	-ms-transition: opacity 0.2s linear;
	-o-transition: opacity 0.2s linear;
	transition: opacity 0.2s linear;
}

#membro-01:hover,#membro-02:hover,
#membro-03:hover,#membro-04:hover{
	opacity: 0.4;

}