CSS : Créer un effet polaroid pour vos photos

Partager cet article

Temps estimé pour la lecture de cet article : 11 min

Hola !

Aujourd’hui, je vais vous présenter quelques règles Css, qui vont nous permettre d’obtenir un effet polaroid sur une image, pratique pour les portfolios 😉 ! Vous allez voir il n’y a rien de bien compliqué. Tout d’abord le résultat final :

La structure Html

C’est parti, commençons par la structure html qui est plutôt simpliste.

        <div class="polaroids">
             <a href="link" title="Moutain">
                <img src="img/mountain.jpg" alt="Moutain" />
            </a>   
            <a href="link" title="Sunrise">
                <img src="img/sunrise.jpg" alt="Sunrise" />
            </a>   
            <a href="link" title="Népal">
                <img src="img/nepal.jpg" alt="Népal" />
            </a>   
        </div>

Un effet polaroid en Css

Occupons nous donc de la partie intéressante à savoir le css.

.polaroids {
	text-align: center;
}
.polaroids a {
	background: white;
	display: inline-block;
	text-decoration: none;
	font-size: 18px;
	padding: 10px 10px 25px 10px;
	margin: 0 0 27px 30px;
	width: 200px;
	color: #8B8B8B;

	-moz-box-shadow: 0px 1px 5px 0px #656565;
	-webkit-box-shadow: 0px 1px 5px 0px #656565;
	-o-box-shadow: 0px 1px 5px 0px #656565;
	box-shadow: 0px 1px 5px 0px #656565;

	-webkit-transform: rotate(-1deg);
	-moz-transform: rotate(-1deg);
	-o-transform: rotate(-1deg);
	tranform: rotate(-1deg);

	-webkit-transition: all .5s ease-in-out;
	-moz-transition: all .5s ease-in-out;
	-ms-transition: all .5s ease-in-out;
	-o-transition: all .5s ease-in-out;
	transition: all .5s ease-in-out;

	-moz-opacity: 0.85;
	-khtml-opacity: 0.85;
	opacity: 0.85;
	-ms-filter:"progid:DXImageTransform.Microsoft.Alpha"(Opacity=85);
	filter: progid:DXImageTransform.Microsoft.Alpha(opacity=85);
	filter:alpha(opacity=85);
}
.polaroids a:hover {
	-moz-opacity: 1;
	-khtml-opacity: 1;
	opacity: 1;
	-ms-filter:"progid:DXImageTransform.Microsoft.Alpha"(Opacity=100);
	filter: progid:DXImageTransform.Microsoft.Alpha(opacity=100);
	filter:alpha(opacity=100);
}
.polaroids a:nth-child(odd) {
	-webkit-transform: rotate(1deg);
	-moz-transform: rotate(1deg);
	-o-transform: rotate(1deg);
	tranform: rotate(1deg);	
}
.polaroids a:after {
	content: attr(title);
}
.polaroids img {
	border: 1px solid #C9C9C9;
}

On va décortiquer le css pour l’attribut a qui est plutôt conséquent :

Commençons par les propriétés générales, on positionne nos liens en display: inline-block pour qu’ils se positionne les uns à côté des autres, on retire l’apparence des liens grâce au text-decoration: none. On donne une taille de 200 pixels et grâce au margin, comme la taille du bloc est fixe le texte passe en-dessous. Texte que l’on récupère sur les balises title des liens grâce à la balise a:after.
On donne un effet d’ombre au bloc grâce à la propriété box-shadow.
On fait un effet de rotation arrière de 1 degré sur tous les liens, qu’on va atténuer, en alternant grâce au sélecteur : .polaroids a:nth-child(odd), qui va nous permettre sur tous les éléments pairs de faire une rotation avant.
On précise qu’au hover, on aura un effet de transition, qui va durer une demi-seconde.
Enfin, on donne une opacité de 85% de l’image d’origine.

Enfin, concernant les autres règles, sur la div générale, on applique un text-align: center, comme ça si on a trop de liens sur la même ligne ils sont poussés en dessous mais seront centrés dans la page et enfin la dernière règle que l’on n’a pas expliquée c’est le hover, quand on passe la souris au-dessus du lien on change l’opacité de celui-ci à 100%.