Maison > Article > interface Web > Comment traduire une image ou une icône en la survolant ?

Comment traduire une image ou une icône en la survolant ?

王林avant: 2023-08-31 15:13:021221parcourir

Dans le développement Web, l'interactivité est essentielle pour offrir une expérience utilisateur mémorable. Une technique courante consiste à survoler une image ou une icône pour révéler plus d'informations ou modifier l'apparence. Traduire en survolant une image ou une icône est un excellent moyen d’ajouter du mouvement et de l’intérêt à votre site Web.

Dans cet article, nous apprendrons comment traduire une image ou une icône au survol. Pour accomplir cette tâche, nous apprendrons différentes méthodes utilisant uniquement HTML et CSS.

Différentes façons de traduire une image ou une icône en survol

Méthode 1 : effet de transition CSS

La première façon de traduire une image ou une icône en survol est possible en utilisant des transitions CSS. Les transitions CSS sont utilisées pour modifier en douceur les valeurs des propriétés, par exemple lors du survol d'un élément, etc. À l'aide de transitions, vous pouvez spécifier la durée et la fonction temporelle de votre animation.

Grammaire

Voici la syntaxe pour transformer une image ou une icône à l'aide de transitions CSS.

<img  src="your-image.jpg" class="trans-image" alt="Comment traduire une image ou une icône en la survolant ?" >
<style>
   .trans-image {
      transition: transform 0.3s ease-in-out;
   }
   .trans-image:hover {
      transform: translateX(20px);
   }
</style>

Exemple

Dans l'exemple ci-dessous, nous utilisons une balise d'image avec le nom de classe "trans-image". Dans la section CSS, nous définissons la propriété de transition sur "transform", une durée de 0,3 seconde, et utilisons la fonction d'assouplissement "ease-in-out". Lorsque nous survolons un élément, nous définissons la propriété transform pour qu'elle traduise 30 pixels vers la droite s'il s'agit d'une image, ou 20 pixels vers la droite s'il s'agit d'une icône.

<html>
<head>
   <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
   <style>
      .translate-image {
         transition: transform 0.7s ease-in-out;
      }
      .translate-image:hover {
         transform: translateX(30px);
      }
      #icon {
         transition: transform 0.7s ease-in-out;
      }
      #icon:hover {
         transform: translateX(20px);
      }        
   </style>
</head>
<body>
   <h2>Translating image and icon using CSS Transitions</h2>
   <p> Hover over the below image or icon to see the transition </p>
   <!-- Translating image on hover using CSS transitions -->
   <img  src="https://www.tutorialspoint.com/static/images/logo.png?v2" class="translate-image" alt="Comment traduire une image ou une icône en la survolant ?" >
   <br>
   <!-- Translating icon on hover using CSS transitions -->
   <i class="fa fa-html5" id="icon" style="color: green; font-size: 50px;" />
</body>
</html>

Méthode 2 : animation CSS

La première façon de traduire une image ou une icône en survol est d'utiliser des animations CSS. CSS permet aux éléments d'être animés en utilisant HTML sans utiliser JavaScript ou Flash. Ici, nous pouvons modifier autant de propriétés CSS que nous le souhaitons, autant de fois que nous le souhaitons.

Pour utiliser l'animation CSS, nous devons d'abord attribuer quelques images clés à l'animation. Les images clés déterminent le style d’un élément à certains moments. L'utilisation d'animations nous permet de créer des effets plus complexes et dynamiques que les transitions.

Grammaire

Vous trouverez ci-dessous la syntaxe pour transformer une image ou une icône à l'aide d'une animation CSS.

<i class="your-icon"></i>
<style>
   .your-icon {
      display: inline-block;
      width: 50px;
      height: 50px;
      background-color: #ccc;
      animation: translate 0.3s ease-in-out;
   }
   .your-icon:hover {
      animation-name: translate-hover;
   }
   @keyframes translate {
      from {
         transform: translateX(0);
      }
      to {
         transform: translateX(10px);
      }
   }
   @keyframes translate-hover {
      from {
         transform: translateX(10px);
      }
      to {
         transform: translateX(20px);
      }
   }
</style>

Exemple

Dans l'exemple ci-dessous, nous utilisons une balise "i" avec la classe "icon" et une balise Comment traduire une image ou une icône en la survolant ? Ici, nous définissons l'attribut d'affichage sur "inline-block". Nous définissons également la propriété d'animation sur "translate", la durée sur 0,3 seconde et la fonction d'accélération sur "ease-in-out". Désormais, lorsque nous survolons, en utilisant des images clés et en définissant le nom de l'animation sur "translate-hover", nous déplaçons l'icône et l'image de 10 pixels vers la droite, puis de 20 pixels vers la droite lors des survols suivants.

<html>
<head>
   <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
   <style>
      .image {
         display: inline-block;
         width: 100px;
         height: 100px;
         animation: translate 0.3s ease-in-out;
      }
      .image:hover {animation-name: translate-hover;}
      #icon {
         display: inline-block;
         width: 100px;
         height: 100px;
         animation: translate 0.3s ease-in-out;
      }
      #icon:hover {animation-name: translate-hover;}
      @keyframes translate {
         from {transform: translateX(0);}
         to {transform: translateX(10px);}
      }
      @keyframes translate-hover {
         from {transform: translateX(10px);}
         to {transform: translateX(20px);}
      }
   </style>
</head>
<body>
   <h2>Translating image and icon using CSS Animations</h2>
   <p> Hover over the imgae orr icon to see the effect</p>
   <!-- Translating image on hover using CSS Animations -->
   <img  src="https://fastly.picsum.photos/id/213/200/300.jpg?hmac=t-54teMEgFL3q9WPaRq2t7YdGCU9aIRw77OCaHlSVRs" class="image" alt="Comment traduire une image ou une icône en la survolant ?" > <br>
   <!-- Translating icon on hover using CSS Animations -->
   <i class="fa fa-html5" id="icon" style="color: green; font-size: 50px;" />
</body>
</html>

Méthode 3 : Grille CSS

La première façon de traduire une image ou une icône au survol consiste à utiliser CSS Grid. CSS Grid utilise un système de mise en page basé sur une grille avec des lignes et des colonnes, ce qui facilite la conception de pages Web sans avoir à utiliser de flotteurs ni de positionnement. Ici, nous spécifions la position de l'élément de grille à l'aide des propriétés grid-row et grid-column, puis appliquons les propriétés de transformation CSS, telles que la rotation ou la translation, à l'élément de grille à traduire.

Grammaire

Vous trouverez ci-dessous la syntaxe pour transformer une image ou une icône à l'aide de CSS Grid.

<div class="grid-container">
   <img  src="your-image.jpg" class="trans-image" alt="Comment traduire une image ou une icône en la survolant ?" >
</div>
<style>
   .grid-container {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      grid-template-rows: repeat(3, 1fr);
      grid-gap: 10px;
   }
   .trans-image {
      grid-row: 2 / 3;
      grid-column: 2 / 3;
      transition: transform 0.3s ease-in-out;
   }
   .trans-image:hover {
      grid-column: 3 / 4;
      transform: translateX(10px);
   }
</style>

Exemple

Dans l'exemple ci-dessous, nous avons défini une balise "div" avec une classe de "conteneur". Ici, en CSS, nous avons défini la propriété d'affichage sur "grid" et définissons le modèle de grille avec trois colonnes et trois lignes, chacune avec une unité de fraction de 1. Pour transformer l'image et l'icône, nous avons utilisé la propriété de transition pour "transformer" avec une durée de 0,3 seconde et une fonction d'accélération de "ease-in-out" qui, lorsqu'elle est survolée, traduit l'image ou l'icône. 10 pixels à droite.

<html>
<head>
   <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
   <style>
      .image {
         grid-row: 2 / 3;
         grid-column: 2 / 3;
         transition: transform 0.3s ease-in-out;
      }
      .image:hover {
         grid-column: 3 / 4;
         transform: translateX(10px);
      }
      #icon {
         grid-row: 2 / 3;
         grid-column: 2 / 3;
         transition: transform 0.3s ease-in-out;
      }
      #icon:hover {
         grid-column: 3 / 4;
         transform: translateX(10px);
      }
   </style>
</head>
<body>
   <div>
      <h2>Translating image and icon using CSS Grid</h2>
      <p> Hover over the image or icon to see the effect </p>
      <!-- Translating image on hover using CSS Grid -->
      <img  src="https://www.tutorialspoint.com/static/images/logo.png?v2" class="image" alt="Comment traduire une image ou une icône en la survolant ?" >
      <br>
      <!-- Translating icon on hover using CSS Grid -->
      <i class="fa fa-html5" id="icon" style="color: green; font-size: 50px;" />
   </div>
</body>
</html>

Conclusion

L'ajout d'interactivité à notre site Web peut améliorer l'expérience utilisateur, et une façon d'y parvenir est de traduire une image ou une icône au survol. Cet effet peut être obtenu en utilisant HTML et CSS, il existe différentes manières d'y parvenir, comme en utilisant des transitions CSS, des animations ou des grilles. Toutes ces méthodes nous permettent de préciser la durée et la fonction temporelle de l'animation et de créer des effets dynamiques. Grâce à ces techniques, nous pouvons créer un site Web plus attrayant qui impressionnera vos visiteurs.

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!

Déclaration：

Cet article est reproduit dans:. en cas de violation, veuillez contacter admin@php.cn Supprimer

Article précédent：Comment spécifier le type de média cible pour un ensemble de règles CSSArticle suivant：Comment spécifier le type de média cible pour un ensemble de règles CSS

Articles Liés

Voir plus