
le puse de nombre Fade álbum porque la imagen que utilicen como portada se desbanecera, además de ser muy ligero ya que esta echo con css, si agrupan muchas imagenes parece un álbum y se ve muy bien, es muy fácil de utilizar, a continuación les dejo lo que tienen que hacer para tenerlo, pueden utilizarlo como mas les guste ![]()
este es el codigo css
.contenedor-ab {
height: 180px;
}
.move-text {
-moz-transition: all 0.5s ease 0s;
-webkit-transition: all 0.5s ease 0s;
-o-transition: all 0.5s ease 0s;
transition: all 0.5s ease 0s;
background: none repeat scroll 0 0 #FFFFFF;
border: 1px solid #CCCCCC;
box-shadow: 1px 1px 2px #CCCCCC;
float:left;
height: 128px;
margin: 0 10px 20px 0;
padding: 5px;
position: relative;
width: 188px;
}
.move-text:hover {
box-shadow: 0 0 2px #CCCCCC;
margin-top: 15px;
}
.img-top {
border: 4px solid #EEEEEE;
cursor: pointer;
opacity: 1;
position: absolute;
-moz-transition: all 0.5s ease 0s;
-webkit-transition: all 0.5s ease 0s;
-o-transition: all 0.5s ease 0s;
}
.img-top:hover {
padding-bottom: 120px;
margin-top: -120px;
z-index: 500;
opacity: 0;
}
.text-absolute {
border: 1px solid #CCCCCC;
font-size: 12px;
height: 122px;
margin: 0;
padding: 2px;
width: 182px;
}
.clear-img {
overflow: hidden;
position: relative;
}
Luego pongan esto en donde quieran tener el efecto:
<div class="contenedor-ab"> <div class="move-text"> <div class="clear-img"> <img class="img-top" src="http://2.bp.blogspot.com/-xLvRgLpIGqE/T5BvD6cF8-I/AAAAAAAABaI/DGwye6x_w7Y/s1600/tump-01.png" /> <p class="text-absolute"> <b>Texto de ejemplo:</b> Yukito es un joven viajero que se gana la vida con un espectáculo de magia y marionetas y que recorre pueblos buscando a una chica alada que vive en el cielo, una historia que su madre le contaba de pequeño, cuando...</p> </div> </div> <div class="move-text"> <div class="clear-img"> <img class="img-top" src="http://1.bp.blogspot.com/-Jx_-sM8FciM/T5BvFQcLdYI/AAAAAAAABaQ/vv1hcC1iRuU/s1600/tump-02.png" /> <p class="text-absolute"> <b>Texto de ejemplo:</b> Yukito es un joven viajero que se gana la vida con un espectáculo de magia y marionetas y que recorre pueblos buscando a una chica alada que vive en el cielo, una historia que su madre le contaba de pequeño, cuando...</p> </div> </div> <div class="move-text" style="margin-right: 0pt;"> <div class="clear-img"> <img class="img-top" src="http://1.bp.blogspot.com/-WZCnSYsqa4s/T5BvGktebLI/AAAAAAAABaY/H7Dj6HK-gLk/s1600/tump-03.png" /> <p class="text-absolute"> <b>Texto de ejemplo:</b> Yukito es un joven viajero que se gana la vida con un espectáculo de magia y marionetas y que recorre pueblos buscando a una chica alada que vive en el cielo, una historia que su madre le contaba de pequeño, cuando...</p> </div> </div> </div> <div style="clear:both"></div>
y listo, si quieren ver una demo les dejo la url de una entrada que hice en un blog de pruebas
Dirijanse al final de la entrada para ver la demo:
http://extreme-creat...e-album-efecto-
con-css3.html?zx=8a954dce768c07c5
Espero les guste, lo hice en mis tiempo libres (:



Identificarse
Registrarse

Media
Masculino
Visualizar historial de nombres usados






