Hola amigos Taringeros hoy les vengo a mostrar un tutorial creado por mi muy sencillo utilizando codigos CSS en una pagina web podramos hacer que una imagen se vea transparente pero cuando pasamos el cursor por arriba de la misma se agrande con sombra. La definicion de ahora es mas clara:
Definicion:
Este codigo empieza en una imagen con opacidad es
decir que se ve clarita y cuando pasas el cursor por arriba de la imagen
se agranad y se ve normal. Tambien se le agrega una sombra al pasar el
cursor por arriba.
Capturas:
Codigo:
<div class="hovergallery">
<img src="coconut.jpg" />
<img src="sunbreakthrough.jpg" />
<img src="desert.jpg" />
<img src="sunflower.jpg" />
<img src="forest.jpg" />
<img src="duck.jpg" />
</div>
<style type="text/css">
.hovergallery img{
-webkit-transform:scale(0.8); /*Webkit: Scale down image to 0.8x original size*/
-moz-transform:scale(0.8); /*Mozilla scale version*/
-o-transform:scale(0.8); /*Opera scale version*/
-webkit-transition-duration: 0.5s; /*Webkit: Animation duration*/
-moz-transition-duration: 0.5s; /*Mozilla duration version*/
-o-transition-duration: 0.5s; /*Opera duration version*/
opacity: 0.7; /*initial opacity of images*/
margin: 0 10px 5px 0; /*margin between images*/
}
.hovergallery img:hover{
-webkit-transform:scale(1.1); /*Webkit: Scale up image to 1.2x original size*/
-moz-transform:scale(1.1); /*Mozilla scale version*/
-o-transform:scale(1.1); /*Opera scale version*/
box-shadow:0px 0px 30px gray; /*CSS3 shadow: 30px blurred shadow all around image*/
-webkit-box-shadow:0px 0px 30px gray; /*Safari shadow version*/
-moz-box-shadow:0px 0px 30px gray; /*Mozilla shadow version*/
opacity: 1;
}
</style>
Video de muestra:
Creditos:
Tutorial por: FRANKKOKO
Publicado en: www.TLTDLJ.com