5 astuces CSS pour vos images

Code Tutoriels
Webdesign / UX design

Avez-vous déjà pensé à adapter le style CSS de votre site ? Que vous ayez développé votre site entièrement ou utilisé un CMS comme WordPress, vous pouvez retravailler votre CSS pour personnaliser votre site, ou pour ajouter des effets de style. Pour travailler votre style sous WordPress, utilisez l’éditeur de style dans Apparence -> Editeur de thème et pensez au thème enfant !

Aujourd’hui, quelques idées pour personnaliser les photos de votre site : vous trouverez ci-après une liste de 5 astuces CSS pour dynamiser graphiquement votre web design !

Rappel : le hover

Le hover est une pseudo-classe CSS qui permet d’ajouter un style différent à un élément lorsque la souris le survole. On l’utilise souvent pour montrer à l’utilisateur qu’il y a un lien sur un élément, comme sur un bouton qui change de couleur par exemple :

Bouton avec hover

Les images peuvent elles aussi proposer des liens, vous pouvez donc leur donner un style différent lorsque l’utilisateur les survole !

1. Border et Shadow

Une première idée toute simple : travailler sur le contour et l’ombre de vos images. Que ce soit pour les présenter de manière originale ou pour souligner le hover, vous pouvez ajouter simplement un contour, une ombre ou les deux ! Pour définir une bordure, on utilise la propriété CSS « border » qui condense les 3 caractéristiques d’une bordure à définir : l’épaisseur (« border-width »), le style (« border-style ») et la couleur (« border-color »). Par exemple :

Je rajoute une bordure de 2 pixels d’épaisseur, de forme solide et de couleur noire.

img {
     border : 2px solid #000000;
}
Image avec bordure
Vous pouvez donc jouer sur l’épaisseur, la couleur et le style. 11 styles sont possibles :
dotted :
Bordure dotted
dashed :
Bordure dashed
solid :
Bordure solid
double :
Bordure double
none :
Sans bordure
hidden :
Bordure cachée
groove :
l’effet dépend de la couleur choisie
Bordure groove
ridge :
l’effet dépend de la couleur choisie
Bordure Ridge
inset :
l’effet dépend de la couleur choisie
Bordure Inset
outset :
l’effet dépend de la couleur choisie
Bordure outset
L’ombre est un deuxième moyen simple pour mettre en avant une image. Elle se définit avec l’élément CSS « box-shadow » qui contient 5 caractéristiques dans l’ordre suivant : position horizontale, position verticale, intensité du flou, épaisseur, couleur. Pour ne pas tâtonner trop longtemps à trouver les bons réglages de votre ombre, des générateurs en ligne vous permettront de récupérer le code correspondant au design que vous cherchez (chez Mozilla notamment).

Une ombre simple décalée de 8px horizontalement et verticalement, avec un léger flou et une épaisseur discrète.

img {
     box-shadow:8px 8px 10px 0 rgba(0,0,0,0.5);
}
Image avec ombre
Pour travailler cette mise en avant sur un hover, il suffit d’ajouter ce code sur la pseudo-classe hover et non directement sur l’image. Sur l’image, il faut ajouter une durée de transition pour que le changement se fasse en douceur :
img {
     -webkit-transition: all 0.2s;
     -moz-transition: all 0.2s;
     -ms-transition: all 0.2s;
     -o-transition: all 0.2s;
     transition: all 0.2s;
}
img:hover {
     border : 2px solid #000000;
     box-shadow:8px 8px 10px 0 rgba(0,0,0,0.5);
}
Image hover ombre et bordure

2. Transform : scale

Scale, qui signifie échelle en anglais, permet de faire des jeux de zoom sur vos éléments. Pour vos images, il permet de faire une animation de hover simple mais efficace. Attention : à doser avec modération !

Un zoom simple permettra de grossir votre image dès que la souris passe dessus :

Pour grossir votre image à 120% :

img {
     -webkit-transition: all 0.2s;
     -moz-transition: all 0.2s;
     -ms-transition: all 0.2s;
     -o-transition: all 0.2s;
     transition: all 0.2s;
}
img:hover {
     transform:scale(1.2);
}
Zoom image
Pour un effet légèrement différent reposant sur la même technique, on peut souhaiter zoomer dans une image à l’intérieur d’un bloc sans changer la taille de ce même bloc. Il faudra alors jouer sur les deux éléments : le bloc qui contient l’image et l’image elle-même.

Le HTML :

<div class="container-img">
     <img src="mon-image" />
</div>

 

Le CSS :

.container-img{
     display:block;
     overflow:hidden;
     border:1px solid #000;
}
.container-img img{
     width:100%;
     height:100%;
     -webkit-transition: all 0.2s;
     -moz-transition: all 0.2s;
     -ms-transition: all 0.2s;
     -o-transition: all 0.2s;
     transition: all 0.2s;
}
.container-img:hover img{
     transform:scale(1.2);
}
Image zoom dans container

3. Grayscale

Une propriété peut-être trop peu connue qui permet de jouer sur la suppression des couleurs de l’image. Cette propriété CSS, signifiant littéralement échelle grise, est spécifique aux images pour transformer leurs couleurs en niveaux de gris.

On peut jouer sur le pourcentage de l’échelle pour diminuer plus ou moins les couleurs, ou les supprimer entièrement :

img{
     filter: grayscale(100%);
}
Image niveaux de gris
Une utilisation intéressante de cette propriété peut être faite dans une galerie d’images où, par défaut, toutes les images sont grisées et la couleur se révèle seulement lorsque la souris survole la photo choisie. Pour un effet renforcé, ajoutez également une transformation d’échelle pour un super résultat !
img.galerie{
     filter: grayscale(100%);
     width:100%;
     -webkit-transition: all 0.2s;
     -moz-transition: all 0.2s;
     -ms-transition: all 0.2s;
     -o-transition: all 0.2s;
     transition: all 0.2s;
}
img.galerie:hover{
     filter: grayscale(0);
     transform:scale(1.4);
}
Image 1 galerie noir et blanc
Image 2 galerie noir et blanc
Image 3 galerie noir et blanc
Image 4 galerie noir et blanc

4. Un bloc d’information

Pourquoi ne pas profiter de l’effet de hover pour proposer de nouvelles informations à vos utilisateurs du site ? Cette présentation demande un peu plus de travail, car il s’agit de préparer une bonne base HTML puis de jouer sur le hover en CSS, mais le résultat est trop ! Ce style repose sur deux propriétés CSS essentielles : la positionnement en position absolute du bloc d’information par rapport au bloc container et le jeu sur la hauteur qui passe de 0 à 100% en hover.

Le HTML :

<div class="container-img">
     <img src="mon-image" />
     <div class="infos-hover">
          <i class="fa fa-eye"></i>
          <p>Découvrez plus d'images</p>
     </div>
</div>

 

Le CSS :

.container-img{
     display:block;
     position:relative;
     overflow:hidden;
     border:1px solid #000;
}
.container-img img{
     width:100%;
     height:100%;
}
.container-img .infos-hover{
     display:block;
     position:absolute;
     left:0;
     bottom:0;
     width:100%;
     height:0;
     color:#fff;
     text-align:center;
     background:rgba(0,0,0,0.8);
     -webkit-transition: all 0.5s;
     -moz-transition: all 0.5s;
     -ms-transition: all 0.5s;
     -o-transition: all 0.5s;
     transition: all 0.5s;
}
.container-img .infos-hover i{
     margin-top:60px;
     font-size:50px;
}
.container-img .infos-hover p{
     text-align:center;
}
.container-img:hover .infos-hover{
     height:100%;
}
Image avec bloc d'information en hover

Découvrez plus d’images

5. Ça tourne !

Surprenez vos utilisateurs et faites tourner vos images ! La propriété CSS « transform », que nous avons vu pour le zoom grâce à son paramètre scale, permet également d’effectuer différentes transformations géométriques, notamment des rotations. Avec le paramètre « rotate », vous allez faire tourner la tête de vos internautes !

La rotation est intéressante sur un hover, et peu se combiner pour un effet plus sympa à un zoom. En reprenant notre zoom bloqué à l’intérieur d’un bloc :
Le HTML :

<div class="container-img">
     <img src="mon-image" />
</div>

 

Le CSS :

.container-img{
     display:block;
     overflow:hidden;
     border:1px solid #000;
}
.container-img img{
     width:100%;
     height:100%;
     -webkit-transition: all 0.2s;
     -moz-transition: all 0.2s;
     -ms-transition: all 0.2s;
     -o-transition: all 0.2s;
     transition: all 0.2s;
}
.container-img:hover img{
     transform:rotate(5deg) scale(1.2);
}
Image rotation et zoom
Vous pouvez aller plus loin et tester la rotation en 3d, grâce au paramètre « rotate3d » de la propriété « transform ». Avec des paramètres plus complexes, il s’agit de préciser les coordonnées x,y,z de l’axe de rotation puis le degré de l’angle de rotation.

On peut ainsi s’amuser à faire faire un demi-tour à son image sur l’axe Y :

img{
     -webkit-transition: all 0.2s;
     -moz-transition: all 0.2s;
     -ms-transition: all 0.2s;
     -o-transition: all 0.2s;
     transition: all 0.2s;
}
img:hover{
     transform:rotate3d(0,1,0,180deg);
}
Image rotation 3d
Le CSS offre de nombreuses possibilités de design. J’espère que ces 5 astuces pour vos images vous permettront de vous amuser et de proposer des mises en page et animations de hover originales à vos utilisateurs ! Avez-vous une préférence ? Ou au contraire un effet que vous détestez ? N’hésitez pas à nous partager votre opinion en commentaire !

A lire aussi dans Webdesign / UX design

10 idées de footer
10 idées de footer pour votre site internet

Comment mettre en page mon footer, avec quelles informations, dans quel ordre ? Vous manquez d'inspiration ? Voici 10 idées de footer pour votre site internet !

Bon à savoir Tutoriels
Lire la suite
La bibliothèque médias WordPress

Vous vous demandez sûrement comment bien utiliser la bibliothèque médias WordPress ? Pas de stress cet article va vous aider, avec ce tutoriel vous saurez vous en servir à la perfection !

Thèmes Tutoriels
Lire la suite
Les bibliothèque de thèmes WordPress
5 bibliothèques de thèmes WordPress

Nous avons déjà évoqué les différents critères de choix pour son thème WordPress, cet article vous permettra de trouver des thèmes WordPress dans plusieurs bibliothèques.

Thèmes
Lire la suite

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Découvrez notre dernier e-book