10 effets de survol d'images faciles à copier et à coller

Les effets de survol sont toujours un sujet amusant à explorer. Dans le passé, nous avions construit d’excellents exemples de hovers CSS faciles à copier-coller directement dans votre code.

Aujourd'hui, nous allons poursuivre avec dix nouveaux effets spécialement conçus pour être utilisés avec des images. Chaque exemple est accompagné d'un extrait HTML et CSS que vous pouvez voler et d'une démonstration en direct afin de le voir en action.

Aperçu

Avant de commencer, jetez un œil à la démonstration ci-dessous pour voir tous les effets de survol que nous allons créer.

Démo: Cliquez ici pour lancer.

Installer

Avant de commencer à créer les démos individuelles, une configuration de base est requise. Voici un morceau de CSS que nous utiliserons pour dicter l'apparence de base de tous les exemples.

* {-webkit-box-sizing: border-box; -moz-box-dimensionnement: border-box; -ms-box-sizing: border-box; taille de la boîte: boîte-frontière; } body {background: # 333; } .pic {border: 10px solid #fff; float: gauche; hauteur: 300px; largeur: 300px; marge: 20px; débordement caché; -webkit-box-shadow: 5px 5px 5px # 111; box-shadow: 5 pixels 5 pixels 5 pixels # 111; }

Il s’agit pour l’essentiel de choses élémentaires: la taille de la boîte nous permet de manipuler le modèle de la boîte (n'hésitez pas à appliquer plus précisément si vous n’aimez pas le sélecteur universel), et la classe pic nous donne l’occasion de lancer un style générique pour chaque photo.

Zoom et Pan

Notre premier groupe d’effets consiste à utiliser certaines astuces avec débordement masqué. En coupant l'image à la limite d'une div, nous pouvons réaliser des survols assez sympas.

Voici une démonstration des quatre effets de survol en action:
Démo: Cliquez ici pour lancer.

Croître

Pour commencer, nous allons faire en sorte que lorsque l'utilisateur survole l'image, la photo s'agrandisse tout en restant dans les limites, ce qui entraîne un effet de zoom avant. Voici le HTML.

HTML

<img src="//lesptitesaffairesdemayl.be/img/images_2/10-easy-image-hover-effects-you-can-copy-and-paste_4.jpg"> <p>Nous avons vu comment agrandir une image en survol, inversons donc cet effet et effectuons un zoom arrière. La méthode est à peu près identique, mais cette fois, vous commencerez avec la taille à 400px et réduirez-la à 300px au survol. </p> <p><strong>HTML</strong></p> <textarea wrap="soft" readonly=""> <img src="//lesptitesaffairesdemayl.be/img/images_2/10-easy-image-hover-effects-you-can-copy-and-paste_5.jpg"> <p>L'effet suivant conserve l'image de la même taille, mais la déplace sur le côté lorsque l'utilisateur la survole. Comme vous pouvez le voir dans notre exemple frappant, c'est un excellent moyen de transmettre un sens de l'action.</p> <p><strong>HTML</strong></p> <textarea wrap="soft" readonly=""> <img src="//lesptitesaffairesdemayl.be/img/images_2/10-easy-image-hover-effects-you-can-copy-and-paste_6.jpg"> <p>Un pan vertical peut aussi être cool. Une fois de plus, je vais utiliser cet effet pour transmettre une impression de mouvement, mais cela est également idéal pour communiquer en hauteur si vous souhaitez effectuer un panoramique comme un grand bâtiment. La falaise sur notre photo aide à pousser ce concept. </p> <p><strong>HTML</strong></p> <textarea wrap="soft" readonly=""> <img src="//lesptitesaffairesdemayl.be/img/images_2/10-easy-image-hover-effects-you-can-copy-and-paste_7.jpg"> <h3>Inclinaison</h3> <img src="//lesptitesaffairesdemayl.be/img/images_2/10-easy-image-hover-effects-you-can-copy-and-paste_8.jpg"> <p>Celui-ci est super simple, tout ce que nous allons faire est de faire légèrement pivoter l'image lorsque l'utilisateur la survole. Le résultat est une illusion basique mais amusante d’une image suspendue tordue. </p> <p><strong>HTML</strong></p> <textarea wrap="soft" readonly=""> <img src="//lesptitesaffairesdemayl.be/img/images_2/10-easy-image-hover-effects-you-can-copy-and-paste_9.jpg"> <p>C’est là que les fous entrent en jeu. L’image ci-dessus ne rend pas vraiment justice à ce qu’elle se fait justice, alors jetez un œil à la démo. Ce qui se passe, c’est que, lorsque l’utilisateur survole, l’image commence à tourner. Quand il tourne, il se transforme d'un carré en un cercle. Le résultat est super amusant à jouer. </p> <p><strong>HTML</strong></p> <textarea wrap="soft" readonly=""> <img src="//lesptitesaffairesdemayl.be/img/images_2/10-easy-image-hover-effects-you-can-copy-and-paste_10.jpg"> <p>En voici un autre qui utilise un rayon de bordure pour arrondir l’image. Cependant, cette fois, nous n'augmenterons pas seulement le rayon de la frontière, mais aussi son épaisseur. Combiné avec le <em>boîte à bordure</em>, cela créera un effet qui se concentre sur une partie particulière d’une image. </p> <p><strong>HTML</strong></p> <textarea wrap="soft" readonly=""> <img src="//lesptitesaffairesdemayl.be/img/images_2/10-easy-image-hover-effects-you-can-copy-and-paste_11.jpg"> <h3>Brouiller</h3> <img src="//lesptitesaffairesdemayl.be/img/images_2/10-easy-image-hover-effects-you-can-copy-and-paste_12.jpg"> <p>Le premier effet que nous recherchons est un simple flou. Longtemps l'homme a cherché à brouiller les pixels avec CSS seul et maintenant c'est finalement possible avec une petite ligne de code!</p> <p><strong>HTML</strong></p> <textarea wrap="soft" readonly=""> <img src="//lesptitesaffairesdemayl.be/img/images_2/10-easy-image-hover-effects-you-can-copy-and-paste_13.jpg"> <p>Cette fois, nous allons supprimer toute la saturation de l'image en survol. Auparavant, il fallait deux images pour obtenir cet effet, mais avec les filtres Webkit, nous pouvons le réduire à une. </p> <p><strong>HTML</strong></p> <textarea wrap="soft" readonly=""> <img src="//lesptitesaffairesdemayl.be/img/images_2/10-easy-image-hover-effects-you-can-copy-and-paste_14.jpg"> <p>Pour notre dernier tour, nous allons assombrir une photo par défaut, puis l’éclaircir à son état normal au survol. Cela crée une sorte d'effet de révélation. </p> <textarea wrap="soft" readonly=""> <img src="//lesptitesaffairesdemayl.be/img/http://lorempixel.com/300/300/technics/2"> / * DARKEN * / .brighten img {-webkit-filter: luminosité (-65%); -webkit-transition: tous les 1 sont faciles; -moz-transition: tous les 1 sont faciles; -o-transition: tous les 1 facilités; -ms-transition: tous les 1 sont faciles; transition: tous les 1 sont faciles; } .brighten img: survol {-webkit-filter: luminosité (0%); }

Ici, 0% correspond à la luminosité normale. Tout ce qui est au-dessus de cela et vous éclaircissez l'image, tout ce qui se trouve en dessous et vous l'assombrissez. Nous avons commencé à -65% et l'avons porté à 0% en vol stationnaire.

Les voler!

Les exemples ci-dessus sont tous destinés à être volés et utilisés à votre guise. Assurez-vous donc de marquer cette page dans vos favoris et d'y revenir la prochaine fois que vous rechercherez un effet de survol CSS intéressant.