Hover Css – Efeito FadeIn

Hover Css – Efeito FadeIn

Neste tutorial vamos fazer um modulo hover css com efeito fadein quando passamos o mouse sobre uma imagem.

Vamos adicionar o Html:

  <div class="box-hover fadein">
    <img src="uploads/1.jpg" alt="Foto"/>
    <div><a href="#" class="link"> Saiba mais</a></div>  
  </div>

   <div class="box-hover fadein">
    <img src="uploads/2.jpg" alt="Foto"/>
    <div><a href="#" class="link"> Saiba mais</a></div>  
  </div>

  <div class="box-hover fadein">
    <img src="uploads/3.jpg" alt="Foto"/>
    <div><a href="#" class="link"> Saiba mais</a></div>  
  </div>

Vamos Adicionar o Css:

div.box-hover{ 

	width:100%; 
	height:100%; 
	float:left; 
	border:5px #FFF solid; 
    border-radius:100%; 
    overflow:hidden;
    box-shadow:3px 3px 8px #999;
    margin-bottom:2em; 

}
		  
div.box-hover img {

	width:100%; 
	height:100%; 
	border-radius:100%;

}

div.box-hover div {

	background-color:#000; 
	width:100%; height:100%; 
	text-align:center; 
	border-radius:100%; 
	color:#FFF;

}

/*Efeito FadeIn*/
div.fadein {

	position:relative;

}

div.fadein div {

	cursor:pointer; 
	position:absolute; 
	left:0; top:0; 
	opacity:0; 
	transition: opacity 500ms;
}

div.fadein div:hover { opacity:0.8; }

div.fadein div .link{

	background-color: transparent;
	display: block;
	text-decoration: none;
	line-height: ;
	color: #FFF;
	font-size: 1.3em;
	top: 45%;
	position: absolute;
	width: 100%;

}

/*RESPONSIVO*/

/*768PX BREAKPOINT*/
@media (min-width:48em){

div.box-hover { width:30%; margin-right:4%; }
div.box-hover:nth-of-type(3n+0) { margin-right:0; }

} 

Veja o Resultado!

Baixar Código Veja Funcionando