web-dev-qa-db-fra.com

Comment faire en CSS une superposition sur une image?

J'essaie de réaliser quelque chose comme ceci:

this effect

Lorsque je survole une image, je souhaite appliquer à cette image cette couleur sombre avec du texte et l'icône.

Je suis coincé ici. J'ai trouvé des tutoriels mais ils n'ont pas fonctionné pour ce cas. Autre problème: chaque image a une hauteur différente. La largeur est toujours la même.

Comment cet effet peut-il être atteint?

htmlcssimagehoveropacity
52
user984621

Vous pouvez y parvenir avec ce simple CSS/HTML:

.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);
}

HTML

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

Démo: http://jsfiddle.net/6Mt3Q/

UPD: Voici une démo finale de Nice avec quelques styles supplémentaires.

.image-container {
    position: relative;
    display: inline-block;
}
.image-container img {display: block;}
.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);
}
.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;
}
<link href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.min.css" rel="stylesheet"/>

<div class="image-container">
    <img src="http://lorempixel.com/300/180" />
    <div class="after">
        <span class="content">This is some content. It can be long and span several lines.</span>
        <span class="zoom">
            <i class="fa fa-search"></i>
        </span>
    </div>
</div>
97
dfsq

Vous pouvez utiliser un pseudo-élément pour cela et avoir votre image en survol:

.image {
  position: relative;
  height: 300px;
  width: 300px;
  background: url(http://lorempixel.com/300/300);
}
.image:before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  transition: all 0.8s;
  opacity: 0;
  background: url(http://lorempixel.com/300/200);
  background-size: 100% 100%;
}
.image:hover:before {
  opacity: 0.8;
}
<div class="image"></div>
28
jbutler483

Un peu tard pour cela, mais ce fil apparaît comme un des meilleurs résultats de Google lors de la recherche d'une méthode de superposition.

Vous pouvez simplement utiliser un background-blend-mode

.foo {
    background-image: url(images/image1.png), url(images/image2.png);
    background-color: Violet;
    background-blend-mode: screen multiply;
}

Cela prend la deuxième image et la fusionne avec la couleur d'arrière-plan en utilisant le mode de fusion multiple, puis la première image avec la deuxième image et la couleur d'arrière-plan en utilisant le mode de fusion d'écran. Il existe 16 modes de fusion différents que vous pouvez utiliser pour réaliser n'importe quelle superposition.

multiplier, écran, superposer, assombrir, éclaircir, color-dodge, color-burn, lumière dure, lumière douce, différence, exclusion, teinte, saturation, couleur et luminosité.

12
Emil Mladenov