Créer une galerie d'images Polaroid

Pour transformer nos images en Polaroid, nous allons appliquer un style particulier aux liens contenant ces dernières. Et c'est grâce à ce style que nous allons pouvoir utiliser le contenu de l'attribut title comme légende de nos images. Nous allons donc appliquer un arrière-plan blanc et un padding à nos liens pour donner l'effet Polaroid.

Le padding en dessous de l'image doit être légèrement plus grand que sur les autres côtés, car c'est à cet endroit qu'on affichera notre texte.

.polaroid-images a
{
        background: white;
        display: inline;
        float: left;
        margin: 0 15px 30px;
        padding: 10px 10px 25px;
        text-align: center;
        text-decoration: none;
        -webkit-box-shadow: 0 4px 6px rgba(0, 0, 0, .3);
        -moz-box-shadow: 0 4px 6px rgba(0,0,0,.3);
        box-shadow: 0 4px 6px rgba(0,0,0,.3);
        -webkit-transition: all .15s linear;
        -moz-transition: all .15s linear;
        transition: all .15s linear;
        z-index:0;
}

À ce stade nous n'avons pas encore de texte affiché sous les images. Nous allons donc utiliser la pseudo-classe CSS :after afin d'ajouter un nouvel élément après nos liens. L'avantage de cette méthode est que nous allons pouvoir récupérer le contenu de l'attribut title de nos liens avec la propriété CSS content.

.polaroid-images a:after {
        color: #333;
        font-size: 20px;
        content: attr(title);
        position: relative;
        top:15px;
}

Enfin on s'assure que quelle que soit l'image elle rentrera toujours dans notre zone HTML.

.polaroid-images img {
        display: block;
        width: inherit;
}

Afficher des images qui ressemblent à des Polaroid n'est pas suffisant, il va falloir ajouter un peu d'interactions sur ces images. Nous pouvons faire en sorte que les images aient l'air d'avoir été jetées, comme on jette des Polaroid sur une table pour les regarder. Pour créer cet effet, nous allons tourner légèrement chaque image de manière aléatoire.

Pour obtenir une rotation aléatoire nous allons utiliser le sélecteur CSS nth-child pour atteindre toutes les images et les tourner en fonction de l'ordre avec lequel elles apparaissent sur la page.

.polaroid-images a:nth-child(2n)
{
        -webkit-transform: rotate(4deg);
        -moz-transform: rotate(4deg);
        transform: rotate(4deg);
}
.polaroid-images a:nth-child(3n) {
        -webkit-transform: rotate(-24deg);
        -moz-transform: rotate(-24deg);
        transform: rotate(-24deg);
}
.polaroid-images a:nth-child(4n)
{
        -webkit-transform: rotate(14deg);
        -moz-transform: rotate(14deg);
        transform: rotate(14deg);
}
.polaroid-images a:nth-child(5n)
{
        -webkit-transform: rotate(-18deg);
        -moz-transform: rotate(-18deg);
        transform: rotate(-18deg);
}

Nous pouvons ensuite créer un effet de « ramassage » des Polaroid en utilisant l'événement hover de la souris. Comme les images seront légèrement tournées, au survol de la souris on les redimensionnera et on annulera la rotation pour les remettre droites.

On redéfinit donc la rotation à 0, l'échelle à 120% et on ajoute une ombre pour donner l'impression que l'image s'élève au-dessus de la page.

.polaroid-images a:hover{
        -webkit-transform: rotate(0deg);
        -moz-transform: rotate(0deg);
        transform: rotate(0deg);
        -webkit-transform: scale(1.2);
        -moz-transform: scale(1.2);
        transform: scale(1.2);
        z-index:10;
        -webkit-box-shadow: 0 10px 20px rgba(0, 0, 0, .7);
        -moz-box-shadow: 0 10px 20px rgba(0,0,0,.7);
        box-shadow: 0 10px 20px rgba(0,0,0,.7);
}

Et c'est tout ce dont nous avions besoin pour créer notre galerie !