#1 
[css] Imgallery by Juan_fer el Jue Ago 11, 2011 4:02 pm
[css] Imgallery by Juan_fer el Jue Ago 11, 2011 4:02 pm
~ Admin TFW ~
Sexo: 
Mensajes: 3262 
Reputacion: 109
Puntos: 10097
Registrado: 16/11/2009
Localización: mexico
Edad: 17
Otra vez experimentando con css, logre hacer un efecto muy bueno, pero por mas que intente no pude ponerle animación en css3, lo siento :blushing:
Vista previa
Donde quieras que aparesca
Rojo oscuro: Imagen pequeña
Violeta: Imagen grande
Css sin style sheet
Rojo: Alto y ancho de la imagen
Azul: Alto y ancho de la imagen al pasar el mouse
Verde: Separación de la imagen a la plantilla
Saludos!
Si tienes una duda comentar el post
Vista previa
Donde quieras que aparesca
<ul class="imgallery">
<li><a href="#"><img src="http://i.imm.io/7Vho.png"><img class="imagen" src="http://i.imm.io/7Vho.png" alt=""></a></li>
<li><a href="#"><img src="http://i.imm.io/7Vho.png"><img class="imagen" src="http://i.imm.io/7Vho.png" alt=""></a></li>
<li><a href="#"><img src="http://i.imm.io/7Vho.png"><img class="imagen" src="http://i.imm.io/7Vho.png" alt=""></a></li>
<li><a href="#"><img src="http://i.imm.io/7Vho.png"><img class="imagen" src="http://i.imm.io/7Vho.png" alt=""></a></li>
<li><a href="#"><img src="http://i.imm.io/7Vho.png"><img class="imagen" src="http://i.imm.io/7Vho.png" alt=""></a></li>
<li><a href="#"><img src="http://i.imm.io/7Vho.png"><img class="imagen" src="http://i.imm.io/7Vho.png" alt=""></a></li>
</ul>
Rojo oscuro: Imagen pequeña
Violeta: Imagen grande
Css sin style sheet
.imgallery{
list-style: none;
padding-top:10px;
padding-left:10px;
}
.imgallery a .imagen{
display: none;
}
.imgallery a:hover .imagen{
display: block;
position: absolute;
z-index: 1;
top: -33px;
left: -45px;
width: 125px;
height: 125px;
box-shadow: 0px 5px 18px rgba(0, 0, 0, 0.63);
-webkit-box-shadow: 0px 5px 18px rgba(0, 0, 0, 0.63);
-moz-box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.63);
-o-box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.63);
}
.imgallery img{
vertical-align: top;
width: 50px;
height: 50px;
}
.imgallery li{
display: inline;
float: left;
margin: 3px;
padding: 5px;
position: relative;
}
Rojo: Alto y ancho de la imagen
Azul: Alto y ancho de la imagen al pasar el mouse
Verde: Separación de la imagen a la plantilla
Saludos!
Si tienes una duda comentar el post
~Administrador de TFW~ 
