Hola chicos aquí traigo un efecto css 3 de imágenes
Este efecto solo es compatible con navegadores -webkit, ya que usa la propiedad -webkit-box-reflect, que solo es soportada por Chrome y Safari, de igual manera se ve bastante bien.
Demo:
http://designshack.net/tutorialexamples/HoverEffects/Ex5.html
Aquí el código por encima o por debajo
Código: <style type="text/css">
#ex5 {
width: 700px;
margin: 0 auto;
min-height: 300px;
}
#ex5 img {
margin: 25px;
opacity: 0.8;
border: 10px solid #eee;
/*Transition*/
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
/*Reflection*/
-webkit-box-reflect: below 0px -webkit-gradient(linear, left top, left bottom, from(transparent), color-stop(.7, transparent), to(rgba(0,0,0,0.1)));
}
#ex5 img:hover {
opacity: 1;
/*Reflection*/
-webkit-box-reflect: below 0px -webkit-gradient(linear, left top, left bottom, from(transparent), color-stop(.7, transparent), to(rgba(0,0,0,0.4)));
/*Glow*/
-webkit-box-shadow: 0px 0px 20px rgba(255,255,255,0.8);
-moz-box-shadow: 0px 0px 20px rgba(255,255,255,0.8);
box-shadow: 0px 0px 20px rgba(255,255,255,0.8);
}
</style>
Código para ponerlo donde sea :
Código:
<div id="containerEx5">
<div id="ex5">
[color=red] <img src="URL DE LA IMAGEN">
<img src="URL DE LA IMAGEN">
<img src="URL DE LA IMAGEN">
<img src="URL DE LA IMAGEN">
<img src="URL DE LA IMAGEN">
<img src="URL DE LA IMAGEN">
<img src="URL DE LA IMAGEN">
<img src="URL DE LA IMAGEN">[/color]
</div>
</div>
Fuente :http://web.tursos.com/tutoriales/html-css/5-efectos-hover-css3-para-copiar-y-pegar
------
 ¿El codigo no funciona? Por favor de aviso a algun moderador haciendo click aqui
Ultima edición por animeeasy el Vie Nov 23, 2012 11:37 am; editado 6 veces
|
Soporte PWG: 