Ce qui suit est un article invité de Dylan Winn-Brown, qui nous montre un moyen performant d’accomplir cet effet de conception.

En travaillant récemment sur le site Web d’un client, on m’a demandé de reproduire un effet comme celui-ci.

Ce type d’effet est notamment utilisé dans les situations de type portfolio où le design a l’intention de montrer à la fois des détails visuels et informatifs.

Il existe de nombreuses méthodes possibles

Comme je n’avais jamais créé un effet comme celui-ci auparavant, j’ai commencé à examiner différentes façons de le faire et je suis tombé sur un certain nombre de méthodes différentes.

Une option consistait à utiliser un plugin jQuery. Celui-ci n’était pas tout à fait l’effet que je recherchais, et certainement pas très léger.

Une autre option consistait à positionner un <img> dans le conteneur et à le manipuler avec CSS. Il pourrait y avoir des avantages potentiels ici, comme pouvoir définir la source avec srcset afin que l’image utilisée soit adaptée aux performances et au périphérique.

Dans ma situation, je voulais gérer l’effet entièrement en CSS, alors je suis allé pour ça.

Fonctionnalité de base

Afin d’obtenir des performances optimales, j’ai décidé d’utiliser la propriété CSStransform pour gérer l’agrandissement de l’image. (Les animations CSS bénéficient de l’accélération matérielle et semblent par conséquent plus fluides que les autres méthodes d’animation.)

Plutôt qu’un <img>, j’ai utilisé un <div> supplémentaire à l’intérieur du parent pour servir d’image. La structure étant :

<div class="parent"> <div class="child"></div></div>

Nous spécifions d’abord les dimensions de l’élément parent. Ensuite, l’enfant peut remplir le parent en utilisant width: 100% et height: 100%;, ainsi que définir l’image d’arrière-plan, en veillant à ce qu’elle soit mise à l’échelle pour couvrir la zone.

.parent { width: 400px; height: 300px;}.child { width: 100%; height: 100%; background-color: black; /* fallback color */ background-image: url("images/city.jpg"); background-position: center; background-size: cover;}

Nous ajoutons ensuite des effets de survol à notre élément parent qui affecteront notre élément enfant. Un style de mise au point est également bon pour l’accessibilité:

.parent:hover .child,.parent:focus .child { transform: scale(1.2);}

Vous voudrez peut-être utiliser un outil pour ajouter des préfixes pour la meilleure prise en charge possible du navigateur.

Pour terminer l’effet de base, nous pouvons ajouter quelques transitions à l’état normal de notre élément enfant:

transition: all .5s;

Si vous souhaitez ajouter une superposition de couleurs, vous pouvez utiliser des pseudo-éléments comme ::before:

.child::before { content: ""; display: none; height: 100%; width: 100%; position: absolute; top: 0; left: 0; background-color: rgba(52, 73, 94, 0.75);}.parent:hover .child:before,.parent:focus .child:before { display: block;}

Maintenant, lorsque nous survolons l’élément parent, l’élément enfant doit afficher une superposition de couleurs!

Enfin, nous allons expliquer comment ajouter du texte à afficher sur notre superposition. Nous pouvons ajouter un élément à notre élément enfant actuel comme ceci:

<div class="parent"> <div class="child"> <span>Hello</span> </div></div>

Nous pouvons donner à notre <span>un style:

span { color: white; /* Good thing we set a fallback color! */ font-family: sans-serif; padding: 25%; position: absolute;}

et nous ne pouvons le rendre visible que lorsque nous survolons le .parent:

.parent:hover span,.parent:focus span { display: block;}

Démo en direct

Voir le zoom de l’image du stylo sur les sites Web du portfolio hover par Dylan (@dwinnbrown) sur CodePen.

Support mobile

Si les conteneurs sont des liens et que les états de survol ne révèlent aucune information essentielle, vous pouvez simplement le laisser tranquille.