Comment créer une icône de superposition d'image en utilisant HTML et CSS

Vue d'ensemble

La superposition d'images est la superposition de deux images ou icônes où une icône ou une image est affichée à l'écran tandis que l'autre icône est affichée à l'écran lorsque le curseur passe sur la première image. Ainsi, pour implémenter cette fonctionnalité, nous devons avoir des connaissances de base en HTML et CSS ainsi que leurs propriétés pour les transitions et les animations. Donc, afin de créer une superposition, nous allons voir quelques exemples de création d'une icône de superposition interne.

Algorithme

Étape 1 - Créez un fichier HTML dans un éditeur de texte et créez un passe-partout HTML dans ce fichier.

Étape 2 − Créez maintenant un conteneur div contenant des images (dont l'une est une image statique) et une autre icône d'image (qui s'affiche lorsque vous passez la souris sur l'image).

Étape 3 − Insérez la balise img avec l'attribut src. Ajoutez le lien image à l'attribut src.

<img  src="https://cdn4.iconfinder.com/data/icons/creative-5/32/text-512.png" alt="Comment créer une icône de superposition d'image en utilisant HTML et CSS" >

Étape 4 − Insérez maintenant le lien font Awesome CDN dans la balise head du document HTML. Lien CDN ci-dessous.

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

Étape 5 − Utilisez maintenant la classe d'icônes utilisateur Font Awesome pour créer l'image de superposition.

<i class="fa fa-user">

Étape 6−Créez maintenant un fichier style.css dans le même dossier et liez le fichier style.css au document HTML.

<link rel="stylesheet" href="style.css">

Étape 7 − Définissez le style de l'élément HTML et stylisez-le de manière à ce que la superposition apparaisse lorsque vous survolez l'image.

Étape 8 − La superposition d'images a été créée avec succès.

Exemple

Dans cet exemple, nous avons créé une superposition d'image à l'aide d'une image et d'une icône de police Awesome. La classe d’icônes utilisateur Font Awesome est importée de la bibliothèque Font Awesome. Donc, pour construire cela, nous avons créé deux fichiers dans un dossier, un fichier contient index.html qui contient la partie squelette de la fonction et un autre fichier est style.css qui contient les styles et la partie principale de la fonction Work.

   <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
   <link rel="stylesheet" href="style.css">
   
   


   

      <img  src="https://cdn4.iconfinder.com/data/icons/creative-5/32/text-512.png" alt="Comment créer une icône de superposition d'image en utilisant HTML et CSS" >
      

         
tutorialspoint.com
         
      
   

Les images ci-dessous sont la sortie de l'exemple ci-dessus, où la première image montre la sortie lorsque la fonction ci-dessus est chargée dans le navigateur et la deuxième image montre la sortie lorsque le curseur survole la première image. Ainsi, lorsqu'un utilisateur survole l'image donnée, il affiche l'image qui se chevauche.

Conclusion

Cette fonctionnalité est utilisée dans des applications telles que les carnets de contacts où le profil de l'utilisateur est affiché sur une image et lorsque l'utilisateur clique ou survole l'image, elle affiche les détails du profil spécifique. Si vous construisez cette fonctionnalité, vous devez vérifier que l'image ou l'icône, l'image statique et l'image affichée au survol de la souris doivent avoir les mêmes dimensions, c'est-à-dire une largeur et une hauteur égales.

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!