Eklablog Tous les blogs Top blogs Technologie & Science Tous les blogs Technologie & Science
Editer l'article Suivre ce blog Administration + Créer mon blog
MENU

Tutorial, CSS, HTML

 


Opacidad y zoom
<div class="hovergallery">
<img src="URL imagen 1" /><img src="URL imagen 2" /><img src="URL imagen 3" /><img src="URL imagen 4" /><img src="URL imagen 5" /><img src="URL imagen 6" /></div>
<style type="text/css">
/*GloriaV */
/*URL: http://tutorialgloriav.eklablog.com/*/
.hovergallery img{ -webkit-transform:scale(0.8);
border-radius: 5%;
border: 1px dotted #000;
-moz-transform:scale(0.8);
-o-transform:scale(0.8);
-ms-transform:scale(0.8);
-webkit-transition-duration: 0.5s;
-moz-transition-duration: 0.5s;
-o-transition-duration: 0.5s;
-ms-transition-duration: 0.5s;opacity: 0.7; /*Nivel de opacidad de las imágenes*/margin: 0 10px 5px 0; /*Margen entre las imágenes*/
}.hovergallery img:hover{-webkit-transform:scale(1.1); /*Webkit: Escala de aumento de la imagen 1.2x tamaño original*/-moz-transform:scale(1.1);
>-o-transform:scale(1.1);
-ms-transform:scale(1.1);
box-shadow:3px 3px 10px #000; /*Sombra sobre toda la imagen*
/-webkit-box-shadow:0px 0px 30px gray;
-moz-box-shadow:3px 3px 10px #000;
-ms-box-shadow:3px 3px 10px #000; opacity: 1
;}
</style>

 

Retour à l'accueil
Partager cet article