Maison > interface Web > tutoriel CSS > 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
Libérer: 2024-10-31 07:52:02
original
815 Les gens l'ont consulté

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>
Copier après la connexion

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>
Copier après la connexion

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>
Copier après la connexion

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!

source:php.cn
Déclaration de ce site Web
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
Derniers articles par auteur
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal