-
BounceInRight
HTML
<div class="hovergallery1">
<img src="http://egif" width="155" height="180" /><img src="http://gif"width="155" height="180" /> </div>
CSS
<style type="text/css"><!--
/*GloriaV */
/*URL: http://tutorialgloriav.eklablog.com/*/
.hovergallery1 img{ -webkit-transform:scale(0.8);
border-radius: 5%/2%;
border: 2px dotted #fff;
-moz-transform:scale(0.3);
-o-transform:scale(0.3);
-ms-transform:scale(0.3);
-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*/
box-shadow:0px 2px 10px #000;
}.hovergallery1 img:hover{
box-shadow:0px 2px 10px #000;
opacity: 0.5; -webkit-transform: translateX(50px); }
-webkit-transform: translateX(-2px); }
-webkit-transform: translateX(2px); }
opacity: 1; -webkit-transform: translateX(0); }
}
opacity: 0.5; -moz-transform: translateX(50px); }
-moz-transform: translateX(-2px); }
-moz-transform: translateX(2px); }
opacity: 1; -moz-transform: translateX(0); }
}
opacity: 0.5; -o-transform: translateX(50px); }
-o-transform: translateX(-2px); }
-o-transform: translateX(2px); }
opacity: 1; -o-transform: translateX(0); }
}
opacity: 0,5; transform: translateX(50px); }
transform: translateX(-5px); }
transform: translateX(5px); }
opacity: 1; transform: translateX(0); }
}
</style>
-
Commentaires
Aucun commentaire pour le moment
Ajouter un commentaire