Sexy Image Hover Effects usando CSS3

Neste artígo nosso amigo do site nikesh encina como criar um efeito css sexy quando fazemos hover em alguma imagem. Você pode ter visto esse efeito com Flash ou em Javascript como well.But que uso ou Flash js, mais você pode fazer o mesmo efeito usando CSS.

Abaixo você pode ver uma imagem so efeito, mais para ver melhor por favor visite o DEMO (em ingles).

Agora vamos ver o código.

HTML

<div class='img' id='img-1'>
	<div class='mask'></div>
	<img src='image/01.jpg' />
</div>
<div class='img' id='img-2'>
	<div class='mask'></div>
	<img src='image/07.jpg' />
</div>
<div class='img' id='img-3'>
	<div class='mask' id='mask-1'></div>
	<div class='mask' id='mask-2'></div>
	<img src='image/05.jpg' />
</div>
<div class='img' id='img-4'>
	<div class='mask'></div>
	<img src='image/04.jpg' />
</div>
<div class='img' id='img-5'>
	<div class='mask'></div>
	<mg src='image/06.jpg' />
</div>
<div class='img' id='img-6'>
	<div class='mask'></div>
	<img src='image/08.jpg' />
</div>

CSS

.img{
	float:left;
	-webkit-transition-duration: 0.5s;
	}
.img img{
	padding:10px;
	border:1px solid #fff;
}
.img:hover{
	-webkit-transform:scale(0.8);
	-webkit-box-shadow:0px 0px 30px #ccc;
}
.img .mask{
	width: 100%;
	background-color: rgb(0, 0, 0);
	position: absolute;
	height: 100%;
	opacity:0.6;
	cursor:pointer;
	-webkit-transition-duration: 0.5s;
}
#img-1:hover .mask{
	height:0%;
}
#img-2:hover .mask{
	height:0%;
	margin-top:130px;
}
#img-3 #mask-1 {
	width:50%;
}
#img-3 #mask-2{
	width:50%;
	margin-left:211px;
}
#img-3:hover #mask-1{
	width:0%;
}
#img-3:hover #mask-2{
	margin-left:430px;
	width:0%;
}
#img-4:hover .mask{
	margin-left:219px;
	margin-top:135px;
	height:0%;
	width:0%;
}
#img-5:hover .mask{
	margin-left:219px;
	margin-top:135px;
	height:0%;
	width:0%;
	-webkit-transform: rotateX(360deg);
}
#img-6:hover .mask{
	margin-left:219px;
	margin-top:135px;
	height:0%;
	width:0%;
	-webkit-transform: rotateZ(750deg);
}

Para visualizar o original visite o DEMO (em ingles). Espero que vocês gostem dessas effects, não esqueça de deixar o seu comentário.

Temas
3 Comments
  • Clica Aqui » Sexy Image Hover Effects usando CSS3
    Posted at 14:06h, 17 maio

    […] post original: Sexy Image Hover Effects usando CSS3 Tags: -img-img, -img-mask, a-como-criar, a-vamos-ver, a-ver-melhor, css, demo, div-class, […]

  • Fabrício
    Posted at 18:58h, 19 junho

    Então, gostei muito do Tutorial,deu uns bug aqui mais nada complexo! Thanks XD

  • Alan
    Posted at 15:33h, 23 abril

    Muito bom! está procurando algo assim para construir meu site!

Post A Comment