Categories
Artí­culos CSS3 Diseño Firefox Google Chrome html5

Efecto Abanico de Fotos en álbumes en Google+

Efecto Abanico en álbumes de 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.

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

Comments are closed.