Effet de survol et affichage d’image en CSS

Sur le net, on trouve beaucoup de tutoriel, indiquant comment réaliser un effet de zoom, au survol d’une image. Cependant, on indique souvent une démarche en utilisant Javascrip, ici, la présentation se fera uniquement en CSS.

survol d'un oiseau

C’est toujours sympa au survol d’une image ou d’un lien, de voir une image plus grande s’afficher, la méthode la plus “classique” passe par du Javascript. Or, il peut arriver que le pc client du serveur est décidé de désactiver Javascript, ce qui rendra nul l’effet désiré, et/ou peut rendre l’affichage de la page plus lente, le script javascript nécessitant d’être chargé pour s’assurer son bon fonctionnement.
Et puis, le CSS c’est plus fun étant lu nativement par tous les navigateurs (enfin presque toutes les propriétés CSS…).

Un exemple de survol d’un lien affichant une autre image : le principe

2 fichiers (un fichier test.html et un fichier test.css) et un dossier image (appelé img) sont nécessaires.

Le fichier test.html

On crée une maquette en html sur laquelle on ajoute un lien tout simplement. Ce lien ne mène à rien. On va appliquer à ce lien la classe “info”.
Dans ce lien, on va ajouter une balise span, et c’est dans cette balise span qu’on va intégrer le lien qui permettra l’affichage de la photo.
Voilà pour la partie HTML.

  <!DOCTYPE html>
<html lang="">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Survol d'une image </title>
    <link rel="stylesheet" href="survol2.css">
</head>

<body>
    <a class="info" href="#">Un lien test
    <span class="cellule"><img class="img_test" src="img/shutterstock_196541855.jpg"></span>
    </a>
</body>

</html>

Le fichier test.css

La première chose qu’on va styliser c’est justement la classe info. On va appliquer simplement une position relative.
On va ensuite cacher l’image que l’on a mis dans la balise par la propriété “display:none”.
On va ensuite installer placé un hover sur la propriété info et span.
Au passage de la souris, on va donc déjà demander de réafficher l’image par la propriété display (display : inline), et placer l’image où on le souhaite par la propriété position:absolute.
Et voilà, c’est réussi.
Au survol du lien, l’image apparait.

.info {
position: relative;
}
.info span {
display: none;
}
.info:hover span {
position: absolute;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
top: 50px;
left: 100px;
}

Exemple de survol d’un lien affichant une autre image : peaufinage du CSS

Comme vous pouvez le voir dans mon exemple, l’image est énorme, on va donc déjà la réduire, appliquer un titre, et une légende en bas.

Pour réduire l’image

On va appliquer une classe à l’image (img class=”img_test”). On va lui donner un max-height et max-width de 50em.

.img_test {
max-height: 50em;
max-width: 50em;
-webkit-filter: grayscale(50%);
filter: grayscale(50%);
}

Appliquer un titre et une légende à l’image

Pour appliquer un titre, on va créer une balise titre que l’on position de manière absolute tous en haut de l’image (top à 0) avec un léger décalage à droite (left à 10px). Cette balise titre va envelopper le titre h5 et la légende.
Pour la cellule h5, on va la centrer, augmenter la taille de la police.
Pour la cellule légende, on va la placer tous en bas en la positionnant de manière absolute, avec un léger décalage vers le bas, et le même intervalle à gauche. On va rajouter un léger padding et diminuer la taille de la police.

.cellule {
position: relative;
float: left;
}
.titre {
position: absolute;
top: 0;
width: 100%;
height: 100%;
left: 10px;
}
.titre h5 {
text-align: center;
}
.legende {
position: absolute;
bottom: 10px;
left: 10px;
margin: 0;
padding: 15px;
}

Et voilà, on aboutit ainsi, au survol d’un lien, à l’affichage d’une photo avec un titre, sa légende. Evidemment, on doit pouvoir rendre tous cela bien plus joli mais, moi, je ne suis pas un graphiste, alors, j’en resterai là.

Bonne soirée à vous.

Pour aller plus loin :
D’autres usages de la fonction hover
Postionnement relatif et absolu en css

Laisser un commentaire

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