Utilisation de CSS3 pour implémenter huit groupes d'animations d'images super cool au survol de la souris

Cet article partage principalement avec vous 8 ensembles d'effets d'animation d'image CSS3 purs et super cool. Chaque effet d'animation est très excitant et mérite d'être appris. Les amis intéressés peuvent s'y référer

C'est un super. effet d'animation d'image CSS3 pur et cool. Il est divisé en 8 groupes d'effets différents. Ils affichent le calque de masque et le titre de l'image de différentes manières lorsque la souris glisse sur l'image. Chaque ensemble d'effets est divisé en 3 effets d'image différents au survol de la souris.

Ces effets d'animation lorsque la souris glisse sur l'image sont tous réalisés à l'aide de CSS3. Ils incluent : l'effet de glissement, l'effet d'inclinaison, l'effet de retournement, l'effet de rotation, etc. Vous trouverez ci-dessous une image d'aperçu d'un GIF.

Utilisez la méthode

pour introduire le fichier hover-effects.css dans la page.

<link rel="stylesheet" href="css/hover-effects.css" />

Structure HTML

Prenons comme exemple l'un des effets d'animation d'image au survol de la souris :

<p class="effect-1">
   <p class="image-box">
      <img src="img-2.jpg" alt="Image-3">
   </p>
   <p class="text-desc">
      <h3>Your Title</h3>
      <p>......</p>
      <a href="#" class="btn">Learn more</a>
   </p>
</p>

Style CSS

.effect-1{   
  float: left;    
  width: 340px;    
  position: relative;    
  overflow: hidden;    
  text-align: center;    
  border: 4px solid rgba(255, 255, 255, 0.9);    
  overflow: visible;   
}   
.effect-1 img{   
  transition: 0.5s;   
}   
.effect-1:hover img{   
  transform: scale(0.3) translateY(-110%);   
  position: relative;    
  z-index: 9;   
} .effect-1 .text-desc{   
  transform: translateY(100%);    
  opacity: 0;    
  padding: 85px 20px 10px;    
  transition: 0.5s;   
} .effect-1:hover .text-desc{   
  transform: translateY(0px);    
  opacity: 1;   
}

Ce qui précède est l'intégralité du contenu de cet article. J'espère qu'il sera utile à l'étude de chacun. Pour plus de contenu connexe, veuillez payer. attention au site PHP chinois !

Recommandations associées :

Utilisez SVG et CSS3 pour implémenter une animation de bordure sympa

CSS3 pour implémenter le survol de la souris pour afficher le contenu étendu

CSS pour obtenir l'effet du texte entourant les images

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!