Comment créer des détails de survol d'image en utilisant HTML et CSS ?

Utilisez les effets de survol d'image avec des détails de texte pour ajouter une interactivité supplémentaire à votre site Web. En utilisant une petite quantité de HTML et de CSS, vous pouvez transformer une image fixe en une entité avec un libellé explicatif lorsque l'utilisateur survole l'image. Ce didacticiel vous guidera dans le développement d'un simple effet de survol d'icône, y compris le code HTML et la décoration CSS requis pour obtenir l'effet final. Que vous soyez un débutant ou un créateur de pages Web expérimenté, cet article vous fournira les détails dont vous avez besoin pour enrichir votre site Web et obtenir des effets de photo-lévitation éclatants.

 : sélecteur de survol

Le sélecteur :hover de CSS est utilisé pour sélectionner et styliser un élément lorsque l'utilisateur le survole. Le sélecteur :hover est utilisé avec d'autres sélecteurs pour appliquer des styles à un élément HTML spécifique lorsque le curseur de la souris se trouve sur l'élément.

Grammaire

selector:hover {
   property: value;
}

Le sélecteur représente le composant HTML à cibler, tandis que les propriétés et valeurs représentent les propriétés CSS et leur état d'évaluation que vous souhaitez appliquer à ce composant au survol.

Méthode

Pour réaliser une décoration d'illustration déclenchée par survol en utilisant HTML et CSS, nous allons suivre les étapes suivantes -

• Créer un conteneur pour la représentation et la représentation - Nous utiliserons un élément div pour créer un conteneur pour l'image et la description. Les conteneurs doivent avoir une certaine taille et dimensions pour garantir leur portée, et utiliser l'attribut « position : relative » pour faciliter le placement des instructions dans le conteneur.

• Ajouter une image - Nous utiliserons l'élément img pour ajouter l'illustration au conteneur. De plus, nous spécifierons que les dimensions de l'image correspondent à 100 % des dimensions du conteneur afin qu'elle conserve les proportions idéales à l'intérieur du conteneur.

• Ajouter une description - Nous utiliserons un autre élément div pour ajouter la description. Ajoutez l'attribut "position : absolue" à ce div et placez-le tout en bas du conteneur afin qu'il chevauche l'illustration

• Description stylisée - Nous utiliserons CSS pour concevoir la description, y compris diverses modifications telles que l'ajout d'une couleur d'arrière-plan, la modification de la couleur du texte et l'ajout d'un remplissage. Nous utiliserons également la propriété "display: flex" et la propriété "flex-direction: column" pour centrer verticalement le texte dans le conteneur de description.

• Ajouter un effet de survol − Afin d'afficher la description lorsque le pointeur de la souris survole l'image, nous utiliserons le sélecteur ":hover" en CSS. Lorsque le pointeur de la souris survole le conteneur, la description deviendra visible et l'image s'agrandira légèrement pour créer un effet de survol.

• Ajouter un effet de transition − Pour rendre l'effet de survol plus fluide et naturel, nous ajouterons un effet de transition

Exemple

Le code suivant montrera comment créer un effet de survol d'image visuellement attrayant en utilisant HTML et CSS. Le code définit un élément conteneur avec une largeur et une hauteur fixes, avec un débordement caché et une image à l'intérieur du conteneur qui occupe toute la taille du conteneur. L'image évolue en douceur avec un effet d'atténuation de 0,3 seconde lorsque la souris passe dessus. De plus, le conteneur contient un élément de texte positionné au bas du conteneur avec une couleur de fond noire partiellement translucide configurée pour remplir toute la largeur et la hauteur du conteneur. Les objets texte possèdent également une série de styles qui centrent le texte dans l'objet. Le composant texte est invisible par défaut, mais apparaît avec un effet d'atténuation de 0,3 seconde lors du survol du conteneur. Cet effet est obtenu en appliquant des propriétés de transition et d'opacité aux éléments de texte. Lorsque la souris survole le conteneur, l'image est agrandie de 20 % pour améliorer la participation et l'interaction de l'utilisateur. Le code produit finalement un effet de survol d’image qui améliore l’attrait visuel de la page Web.

<!DOCTYPE html>
<html>
<head>
   <style>
      .container {
         position: relative;
         width: 300px;
         height: 200px;
         overflow: hidden;
      }
      .container img {
         width: 100%;
         height: 100%;
         transition: all 0.3s ease;
      }
      .text {
         position: absolute;
         bottom: 0;
         left: 0;
         background-color: rgba(0, 0, 0, 0.5);
         color: white;
         padding: 10px;
         width: 100%;
         height: 100%;
         display: flex;
         flex-direction: column;
         justify-content: center;
         align-items: center;
         opacity: 0;
         transition: all 0.3s ease;
      }
      .container:hover .text {
         opacity: 1;
      }
   </style>
</head>
<body>
   <h4>How to Create Image Hovered Detail using HTML & CSS?</h4>
   <div class="container">
      <img src=" https://picsum.photos/200/300" alt="image1">
      <div class="text">
         <h2>Image 1</h2>
         <p>This is some description for the image</p>
      </div>
   </div>
</body>
</html>

Conclusion

En conclusion, créer des effets de survol pour les images contenant des détails de texte est un excellent moyen d'ajouter une couche supplémentaire de dynamique à votre site Web. Avec seulement quelques lignes de code HTML et CSS, vous pouvez animer des images pour fournir des données importantes à vos visiteurs. Grâce aux instructions détaillées de ce didacticiel, vous maîtrisez l'art de concevoir un effet de survol d'image simple mais puissant. Que vous soyez un débutant ou un développeur Web expérimenté, cette approche peut être un outil précieux pour vos compétences en développement Web. Pourquoi ne pas l’essayer et voir comment il améliore votre site Web ?

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!