Vous l'avez noté, Flash a presque disparu de nos pages Web. Et c'est une bonne chose. Lourde à gérer et à modifier, peu ou pas du tout ergonomique, c'est à se demander comment elle a pu être utilisée aussi longtemps.
De son côté, le duo HTML5 et CSS3 ont fait d'énormes progrès, à tel point qu'ils sont devenus la référence en matière de web design.
Voici 15 effets CSS3 pour vos images et qui vont vous étonner !
15 effets CSS3 pour vos images
Le départ
Voici 3 images brutes, c'est à dire qu'aucun effet CSS n'est appliqué sur ces images. C'est le cas le plus fréquent lorsqu'une image est affichée dans une page Web.
La structure HTML
Voici à quoi ressemble la structure HTML des images présentées ici.
Rien de compliqué : une div sur laquelle on appliquera une classe pour obtenir l'effet - zoom dans cet exemple - et des classes pour la mise en forme avec Flexbox.
<div class="zoom d-flex justify-content-center">
<div class="p-2 m-2"><img src="images/img1.jpg" alt="Image chien normale" /></div>
<div class="p-2 m-2"><img src="images/img2.jpg" alt="Image voilier normale" /></div>
<div class="p-2 m-2"><img src="images/img3.jpg" alt="Image fleur normale" /></div>
</div>
1. Zoom
Passons aux choses sérieuses !
Ici, nous allons afficher un effet "zoom" sur l'image au survol de la souris. La fonction CSS scale de la propriété CSS transform permet d'obtenir un agrandissement (ou une réduction) de l'élément HTML concerné. C'est ce qu'il nous faut !
Les classes CSS à utiliser
.zoom img {
-webkit-transform: scale(1);
transform: scale(1);
-webkit-transition: .3s ease-in-out;
transition: .3s ease-in-out;
}
.zoom :hover img {
-webkit-transform: scale(1.3);
transform: scale(1.3);
}
2. Rotation
Ici, nous allons basculer l'image sur un côté grâce à la propriété rotate.
Les classes CSS à utiliser
.rotate img {
-webkit-transition: all 0.5s ease;
transition: all 0.5s ease;
}
.rotate :hover img {
-webkit-transform: rotate(-15deg);
transform: rotate(-15deg);
}
3. Dézoomer
Après avoir zoomé sur les images, nous allons maintenant dézoomer !
Si vous avez compris le principe du premier exemple, celui-ci ne devrait pas vous poser de problèmes : c'est "presque" pareil !
Les classes CSS à utiliser
.zoom-out img {
-webkit-transform: scale(1.25);
transform: scale(1.25);
-webkit-transition: .3s ease-in-out;
transition: .3s ease-in-out;
}
.zoom-out :hover img {
-webkit-transform: scale(1);
transform: scale(1);
}
4. Image ronde
Plutôt que de vous embetter à découper vos images avec un logiciel de retouche photo, utilisons un peu de CSS pour rendre une image ronde !
Les classes CSS à utiliser
.rounded img {
width: 200px; /* largeur de l'image */
height: auto; /* hauteur de l'image */
-webkit-transition: .3s ease-in-out !important;
transition: .3s ease-in-out !important;
}
.rounded :hover img:hover {
width: 150px; /* on affiche l'image au carré */
height: 150px;
border-radius: 50%;
}
Explications : pour avoir une image ronde avec la propriété border-radius, il faut que l'image de départ soit carrée. A défaut, vous obtiendrez une image ovale (ce qui est joli aussi).
5. Slide
Le slide est un effet visuel qui simule un déplacement latéral de l'image. Voyons à quoi ressemble le code :
Les classes CSS à utiliser
.slide img {
margin-left: 0px;
-webkit-transition: .3s ease-in-out;
transition: .3s ease-in-out;
}
.slide :hover img {
width: 100%;
height: 100%;
margin-left: -30px;
}
Explications : pour avoir un effet slide dans l'autre sens, il vous suffit de remplacer la propriété margin-left par la propriété margin-right ou d'appliquer une valeur positive à margin-left.
6. Rotation et Dézoome
Toujours plus fort grâce à CSS3, nous allons tourner et dézoomer nos images en même temps ! Encore une fois, vous allez voir que ce n'est pas très compliqué à mettre en oeuvre.
Les classes CSS à utiliser
.rotate-zoom-out img {
-webkit-transform: rotate(10deg) scale(1.25);
transform: rotate(10deg) scale(1.25);
-webkit-transition: .3s ease-in-out;
transition: .3s ease-in-out;
}
.rotate-zoom-out :hover img {
-webkit-transform: rotate(0) scale(1);
transform: rotate(0) scale(1);
}
7. Flou
Flouter une image peut être intéressant afin de masquer une image ou pour "forcer" vos visiteurs à passer leur souris dessus afin de l'afficher parfaitement nette. C'est ce que nous allons voir ici.
Les classes CSS à utiliser
.blur img {
-webkit-filter: blur(3px);
filter: blur(3px);
-webkit-transition: .3s ease-in-out;
transition: .3s ease-in-out;
}
.blur :hover img {
-webkit-filter: blur(0);
filter: blur(0);
}
Explications : pour avoir un flou plus prononcé, il vous suffit d'augmenter la valeur indiquée à la propriété blur : 5px, par exemple.
8. Noir et blanc
La magie et la poésie des images en noir et blanc, on ne s'en lasse pas ! CSS va vous en faire voir de toutes les couleurs grâce au filtre grayscale !
Les classes CSS à utiliser
.grayscale img {
-webkit-filter: grayscale(100%);
filter: grayscale(100%);
-webkit-transition: .3s ease-in-out;
transition: .3s ease-in-out;
}
.grayscale :hover img {
-webkit-filter: grayscale(0);
filter: grayscale(0);
}
Explications : vous pouvez utiliser des valeurs intermédiaires pour la propriété grayscale : 25%, 42%, 77%, etc.
9. Sépia
Le sépia, c'est cette teinte délicieusement rétro qu'ont les photographies de nos grands-parents. CSS3 vous permet de voyager dans le temps et de revenir à cette époque !
Les classes CSS à utiliser
.sepia img {
-webkit-filter: sepia(100%);
filter: sepia(100%);
-webkit-transition: .3s ease-in-out;
transition: .3s ease-in-out;
}
.sepia :hover img {
-webkit-filter: sepia(0);
filter: sepia(0);
}
10. Morph
Attention, on commence à mélanger les effets entre eux. Ici, on va arrondir les images et les faire tourner sur elles-mêmes en utilisant simplement des propriétés CSS3.
Les classes CSS à utiliser
.morph img {
width: 200px;
height: 150px;
-webkit-filter: grayscale(0) blur(0px);
filter: grayscale(0) blur(0px);
-webkit-transition: all 0.5s ease;
transition: all 0.5s ease;
}
.morph :hover img {
width: 150px; /* on affiche l'image au carré */
height: 150px;
border-radius: 50%; /* on arrondit l'image */
-webkit-transform: rotate(360deg); /* rotation de l'image */
transform: rotate(360deg);
}
11. Opacité
CSS3 permet également de rendre opaque ou d'éclaircir une image grâce à la propriété opacity.
Une valeur de 1 n'effecte pas l'image. Une valeur supérieure l'assombrira (1.3, par exemple) et une valeur inférieur va l'éclaircir (.5, par exemple).
Les classes CSS à utiliser
.opacity1 img {
opacity: 1;
-webkit-transition: .3s ease-in-out;
transition: .3s ease-in-out;
}
.opacity1 :hover img {
opacity: .5;
}
12. Opacité colorée
Par défaut, l'opacité applique un filtre noir sur l'image si l'on souhaite l'assombrir. Mais grâce à la puissance de CSS3, il est possible de choisir une autre couleur !
Les classes CSS à utiliser
.opacity-color img {
opacity: 1;
-webkit-transition: .3s ease-in-out;
transition: .3s ease-in-out;
}
.opacity-color :hover img {
opacity: .5;
}
Explications : des couleurs de fond différentes ont été définies dans chaque balise div pour obtenir des effets différents.
Et pour terminer, je vous propose de voir une série de 3 effets visuels assez sympa à appliquer à vos images : le flash, le reflet et le halo lumineux !
13. Flash
Les classes CSS à utiliser
.flash :hover img {
opacity: 1;
-webkit-animation: flash 1.5s;
animation: flash 1.5s;
}
@-webkit-keyframes flash {
0% {
opacity: .4;
}
100% {
opacity: 1;
}
}
@keyframes flash {
0% {
opacity: .4;
}
100% {
opacity: 1;
}
}
14. Reflet
Les classes CSS à utiliser
.shine div {
position: relative;
}
.shine ::before {
position: absolute;
top: 0;
left: -75%;
z-index: 2;
display: block;
content: '';
width: 50%;
height: 100%;
background: -webkit-linear-gradient(left, rgba(255,255,255,0) 0%, rgba(255,255,255,.3) 100%);
background: linear-gradient(to right, rgba(255,255,255,0) 0%, rgba(255,255,255,.3) 100%);
-webkit-transform: skewX(-25deg);
transform: skewX(-25deg);
}
.shine :hover::before {
-webkit-animation: shine .75s;
animation: shine .75s;
}
@-webkit-keyframes shine {
100% {
left: 125%;
}
}
@keyframes shine {
100% {
left: 125%;
}
}
15. Halo lumineux
Les classes CSS à utiliser
.light div {
position: relative;
}
.light ::before {
position: absolute;
top: 50%;
left: 50%;
z-index: 2;
display: block;
content: '';
width: 0;
height: 0;
background: rgba(255,255,255,.2);
border-radius: 100%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
opacity: 0;
}
.light :hover::before {
-webkit-animation: circle .75s;
animation: circle .75s;
}
@-webkit-keyframes circle {
0% {
opacity: 1;
}
40% {
opacity: 1;
}
100% {
width: 200%;
height: 200%;
opacity: 0;
}
}
@keyframes circle {
0% {
opacity: 1;
}
40% {
opacity: 1;
}
100% {
width: 200%;
height: 200%;
opacity: 0;
}
}
Conclusion
Ceci n'est qu'un très petit aperçu de ce qu'il est possible de réaliser aujourd'hui en terme de web design grâce à HTML5 et CSS3. Je rappele que cela n'est utilisable que sur des navigateurs modernes, ce qui exclu les anciennes versions d'Internet Explorer !
N'hésitez surtout pas à copier, à modifier et à utiliser ces codes sur jouer avec vos images dans vos pages web. Je vous encourage à tester et à explorer toutes les possibilités offertes par CSS3.
Amusez-vous bien !
