Efecto Abanico de Fotos en álbumes en Google+

Efecto de Abanico en Albumes de Google+ hecho con CSS3 y HTML5

Volviendo nuevamente a los artículos, me ha gustado mucho el efecto que tiene Google+ al ver los albumes de fotos. Al acercar el mouse a un álbum de fotos, este se despliega cual abanico.

Jugando un poco con Transiciones CSS3, se puede lograr fácilmente el efecto, veamos.

Código:

HTML:

<figure class="album">

    <a href="http://www.buayacorp.com">

        <div class="picture"><img src="pictures/cusco01.jpg" alt="Cusco"></div>

        <div class="picture"><img src="pictures/cusco02.jpg" alt="Cusco"></div>

        <div class="picture"><img src="pictures/cusco03.jpg" alt="Cusco"></div>

    </a>

    <figcaption>Cusco Perú</figcaption>

</figure>

CSS:

.album{
display: block;
position: relative;
width: 265px;
height: 215px;
cursor: pointer;
float: left;
}
figcaption {

    display: block;

    position: absolute;

    bottom: 0;

    text-align: center;

    color: #666;

}
.picture img {

    -webkit-box-shadow: 1px 1px 2px #666;

    -moz-box-shadow: 1px 1px 2px #666;

    -o-box-shadow: 1px 1px 2px #666;

    box-shadow: 1px 1px 2px #666;

    background: #F3F3F3;

    padding: 4px;

    position: absolute;

    width: 240px;

    height: 180px;

}
/* Selectores por numero: http://css-tricks.com/5452-how-nth-child-works*/

.picture:nth-child(1) img {

    z-index: 3;

    -webkit-transition-duration: 0.3s;

    -moz-transition-duration: 0.3s;

    -o-transition-duration: 0.3s;

    transition-duration: 0.3s;

}
.picture:nth-child(2) img {

    left: 10px;

    z-index: 2;

    -webkit-transform: scale(0.97);

    -webkit-transition-duration: 0.3s;

    -moz-transform: scale(0.97);

    -moz-transition-duration: 0.3s;

    -o-transform: scale(0.97);

    -o-transition-duration: 0.3s;

    transform: scale(0.97);

    transition-duration: 0.3s;

}
.picture:nth-child(3) img {

    left: 20px;

    z-index: 1;

    -webkit-transition-duration: 0.3s;

    -webkit-transform: scale(0.94);

    -moz-transition-duration: 0.3s;

    -moz-transform: scale(0.94);

    -o-transition-duration: 0.3s;

    -o-transform: scale(0.94);

    transition-duration: 0.3s;

    transform: scale(0.94);

}
/*

    Este es el efecto

*/

.album:hover .picture:nth-child(1) img {

    -webkit-transform: translate(-50px, 0) rotate(-5deg);

    -moz-transform: translate(-50px, 0) rotate(-5deg);

    -o-transform: translate(-50px, 0) rotate(-5deg);

    transform: translate(-50px, 0) rotate(-5deg);

    z-index: 6;

}
.album:hover .picture:nth-child(2) img {

    -webkit-transform: scale(1.05);

    -moz-transform: scale(1.05);

    -o-transform: scale(1.05);

    transform: scale(1.05);

    z-index: 5;

}
.album:hover .picture:nth-child(3) img {

    -webkit-transform:  translate(50px, 0) rotate(5deg);

    -moz-transform:  translate(50px, 0) rotate(5deg);

    -o-transform:  translate(50px, 0) rotate(5deg);

    transform:  translate(50px, 0) rotate(5deg);

    z-index: 4;

}

Ver Ejemplo

Compatibilidad

Funciona bien en Google Chrome, Mozilla Firefox, Safari y con mínimos bugs en Ópera. Demás está decir que Internet Explorer no soporta transformaciones y no se verá bien.

Código:

Compatibilidad

One reply on “Efecto Abanico de Fotos en álbumes en Google+”