Maison  >  Article  >  interface Web  >  Comment créer une superposition d'images avec CSS qui fonctionne sur des images de différentes hauteurs ?

Comment créer une superposition d'images avec CSS qui fonctionne sur des images de différentes hauteurs ?

Patricia Arquette
Patricia Arquetteoriginal
2024-10-31 07:52:02742parcourir

How to Create an Image Overlay with CSS That Works on Images of Varying Heights?

Comment créer une superposition d'images avec CSS

Le problème :

Vous souhaitez placez une superposition sombre avec du texte et une icône sur une image lorsque vous la survolez. Cependant, vous rencontrez des difficultés car les hauteurs des images varient et les tutoriels précédents n'ont pas réussi.

La solution :

Cet effet peut être obtenu avec les éléments suivants Code CSS :

<code class="css">.image-container {
  position: relative;
  width: 200px;
  height: 300px;
}

.image-container .after {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: none;
  color: #FFF;
}

.image-container:hover .after {
  display: block;
  background: rgba(0, 0, 0, .6);
}</code>

HTML :

<code class="html"><div class="image-container">
  <img src="http://lorempixel.com/300/200" />
  <div class="after">This is some content</div>
</div></code>

Style supplémentaire :

Pour un look plus soigné, pensez à ajouter le CSS suivant :

<code class="css">.image-container .after .content {
  position: absolute;
  bottom: 0;
  font-family: Arial;
  text-align: center;
  width: 100%;
  box-sizing: border-box;
  padding: 5px;
}

.image-container .after .zoom {
  color: #DDD;
  font-size: 48px;
  position: absolute;
  top: 50%;
  left: 50%;
  margin: -30px 0 0 -19px;
  height: 50px;
  width: 45px;
  cursor: pointer;
}

.image-container .after .zoom:hover {
  color: #FFF;
}</code>

Démo :

Voir la démo ici : http://jsfiddle.net/6Mt3Q/

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:
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn