Création d'un effet de survol de traduction avec HTML et CSS-tutoriel CSS-php.cn

Création d'un effet de survol de traduction avec HTML et CSS

PHPz

Libérer： 2024-08-09 17:00:32

original

718 Les gens l'ont consulté

Dans la conception Web moderne, la création d'expériences visuellement attrayantes et interactives est essentielle pour capter l'intérêt des utilisateurs. L'un des moyens les plus efficaces d'y parvenir consiste à utiliser des effets de survol, qui fournissent un retour immédiat lorsqu'un utilisateur interagit avec des éléments d'une page.

Qu'est-ce qu'un effet de survol de traduction ?
Un effet de survol de translation consiste à déplacer un élément le long de l'axe X ou Y lorsqu'un utilisateur le survole avec sa souris. Cet effet donne l'illusion que l'élément bouge ou flotte, offrant une expérience utilisateur plus interactive et réactive.

Sortie-

Creating a Translate Hover Effect with HTML and CSS

HTML-

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Translate Hover Effect</title>
</head>
<body>
  <div class="image-container">
    <img src="image1.jpg" alt="Image 1" class="hover-image">
    <img src="image2.jpg" alt="Image 2" class="hover-image">
    <img src="image3.jpg" alt="Image 3" class="hover-image">
  </div>
</body>
</html>

Copier après la connexion

CSS-

body {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  margin: 0;
}

.image-container {
  display: flex;
  gap: 20px;
  max-width: 1000px;
    flex-wrap:wrap;
}

.hover-image {
  width: 200px;
  height: 200px;
  object-fit: cover;
  transition: transform 0.3s ease-in-out;
}

.hover-image:hover {
  transform: translateY(-10px);
}

Copier après la connexion

affichage: flex;: L'affichage: flex; La propriété est utilisée pour créer un conteneur flexible. Cet attribut facilite la création d'une structure de mise en page flexible et réactive sans nécessiter de flotteurs ni de positionnement.

Avantages de l'affichage : flexibilité ; :

Options d'alignement faciles pour les éléments horizontaux et verticaux.
Personnalisez l'ordre visuel des choses sans affecter la structure HTML.
Flexibilité : les éléments peuvent s'ajuster pour s'adapter à la zone disponible, ce qui donne un design réactif.
Organisez efficacement l'espace dans les éléments le long de l'axe principal (ligne ou colonne).

flex-wrap: wrap;:

Le flex-wrap : envelopper; propriété, utilisée conjointement avec display: flex;, contrôle la façon dont les objets flexibles s'enroulent sur plusieurs lignes. (Lire la suite)

Avantages du flex-wrap : enveloppement ;

Conception réactive : permet aux objets de migrer vers la ligne suivante lorsqu'il n'y a pas suffisamment d'espace sur une seule ligne, essentiel pour les mises en page réactives.
Meilleure utilisation de l'espace : permettre aux éléments de s'enrouler améliore l'utilisation de l'espace et évite les problèmes de débordement.
Cohérence : elle contribue à une mise en page uniforme et organisée quelle que soit la taille de l'écran.

Lire l'article complet - Cliquez ici

Conclusion
L'effet de survol de traduction est un excellent outil à avoir dans votre boîte à outils de conception Web. C’est simple à mettre en œuvre, léger et peut ajouter une touche professionnelle à votre site Web. Que vous présentiez des images, des boutons ou d'autres éléments interactifs, cet effet contribue à engager les utilisateurs et à améliorer l'expérience utilisateur globale.

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!