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

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!