web-dev-qa-db-fra.com

Superposition noire transparente sur le survol de l'image avec uniquement du CSS?

J'essaie d'ajouter une superposition noire transparente à une image lorsque la souris survole celle-ci avec uniquement du CSS. Est-ce possible? J'ai essayé ceci:

http://jsfiddle.net/Zf5am/565/

Mais je ne peux pas faire en sorte que la div apparaisse.

<div class="image">
    <img src="http://www.newyorker.com/online/blogs/photobooth/NASAEarth-01.jpg" alt="" />
    <div class="overlay" />
</div> 

.image {
  position: relative;
  border: 1px solid black;
  width: 200px;
  height: 200px;
}
.image img {
  max-width: 100%;
  max-height: 100%;
}
.overlay {
  position: absolute;
  top: 0;
  left: 0;
  display: none;
  background-color: red;
  z-index: 200;
}
.overlay:hover {
  display: block;
}
csscss3
82
RobVious

Je suggérerais d'utiliser un pseudo-élément à la place de l'élément superposé. Étant donné que les pseudo-éléments ne peuvent pas être ajoutés sur les éléments img inclus, vous devrez néanmoins envelopper l'élément img.

EXEMPLE EN DIRECT ICI - EXEMPLE AVEC TEXTE 

_<div class="image">
    <img src="http://i.stack.imgur.com/Sjsbh.jpg" alt="" />
</div>
_

En ce qui concerne le CSS, définissez des dimensions facultatives sur l'élément _.image_ et positionnez-le relativement. Si vous visez une image sensible, omettez simplement les dimensions et cela fonctionnera toujours (exemple) . Il est juste de noter que les dimensions doivent être sur l'élément parent, par opposition à l'élément img lui-même, voir .

_.image {
    position: relative;
    width: 400px;
    height: 400px;
}
_

Donnez à l'élément enfant img une largeur de _100%_ du parent et ajoutez _vertical-align:top_ pour résoudre les problèmes d'alignement de la ligne de base par défaut.

_.image img {
    width: 100%;
    vertical-align: top;
}
_

En ce qui concerne le pseudo-élément, définissez une valeur de contenu et positionnez-la absolument par rapport à l'élément _.image_. Une largeur/hauteur de _100%_ garantira que cela fonctionne avec différentes dimensions img. Si vous souhaitez faire la transition de l'élément, définissez une opacité de _0_ et ajoutez les propriétés/valeurs de la transition.

_.image:after {
    content: '\A';
    position: absolute;
    width: 100%; height:100%;
    top:0; left:0;
    background:rgba(0,0,0,0.6);
    opacity: 0;
    transition: all 1s;
    -webkit-transition: all 1s;
}
_

Utilisez une opacité de _1_ lorsque vous survolez le pseudo-élément afin de faciliter la transition:

_.image:hover:after {
    opacity: 1;
}
_

END RESULT ICI

Si vous souhaitez ajouter du texte en survol:

Pour une approche plus simple, ajoutez simplement le texte en tant que valeur content du pseudo-élément:

EXEMPLE ICI 

_.image:after {
    content: 'Here is some text..';
    color: #fff;

    /* Other styling.. */
}
_

Ce devrait fonctionner dans la plupart des cas; Toutefois, si vous avez plus d'un élément img, vous ne souhaitez peut-être pas que le même texte apparaisse au survol. Vous pouvez donc définir le texte dans un attribut _data-*_ et disposer ainsi d'un texte unique pour chaque élément img.

EXEMPLE ICI 

_.image:after {
    content: attr(data-content);
    color: #fff;
}
_

Avec la valeur content de attr(data-content), le pseudo-élément ajoute le texte de l'attribut _.imagedata-content_:

_<div data-content="Text added on hover" class="image">
    <img src="http://i.stack.imgur.com/Sjsbh.jpg" alt="" />
</div>
_

Vous pouvez ajouter du style et faire quelque chose comme ceci:

EXEMPLE ICI

Dans l'exemple ci-dessus, le pseudo-élément _:after_ sert de superposition en noir, tandis que le pseudo-élément _:before_ est la légende/le texte. Les éléments étant indépendants les uns des autres, vous pouvez utiliser un style distinct pour un positionnement optimal.

_.image:after, .image:before {
    position: absolute;
    opacity: 0;
    transition: all 0.5s;
    -webkit-transition: all 0.5s;
}
.image:after {
    content: '\A';
    width: 100%; height:100%;
    top: 0; left:0;
    background:rgba(0,0,0,0.6);
}
.image:before {
    content: attr(data-content);
    width: 100%;
    color: #fff;
    z-index: 1;
    bottom: 0;
    padding: 4px 10px;
    text-align: center;
    background: #f00;
    box-sizing: border-box;
    -moz-box-sizing:border-box;
}
.image:hover:after, .image:hover:before {
    opacity: 1;
}
_
199
Josh Crozier

filtre CSS

Bien que cette fonctionnalité ne soit implémentée que dans webkit, et qu'elle n'a pas compatibilité du navigateur , mais cela vaut la peine de jeter un coup d'œil sur:

.image img {
    max-width: 100%;
    max-height: 100%;
    -webkit-transition: .2s all;
}

.image img:hover {
    -webkit-filter: brightness(50%);
}

Démo JSFiddle

Références

Sujets similaires sur SO

32
Hashem Qolami

Tu étais proche. Cela fonctionnera:

.image { position: relative; border: 1px solid black; width: 200px; height: 200px; }
.image img { max-width: 100%; max-height: 100%; }
.overlay { position: absolute; top: 0; left: 0; right:0; bottom:0; display: none; background-color: rgba(0,0,0,0.5); }
.image:hover .overlay { display: block; }

Vous deviez placer le :hover sur l'image et faire en sorte que .overlay recouvre l'intégralité de l'image en ajoutant right:0; et bottom:0.

jsfiddle: http://jsfiddle.net/Zf5am/569/

9
david

Voici un bon moyen d’utiliser: après le div de l’image, au lieu du div de superposition supplémentaire: http://jsfiddle.net/Zf5am/576/

<div class="image">
    <img src="http://www.newyorker.com/online/blogs/photobooth/NASAEarth-01.jpg" alt="" />
</div>

.image {position:relative; border:1px solid black; width:200px; height:200px;}
.image img {max-width:100%; max-height:100%;}
.image:hover:after {content:""; position:absolute; top:0; left:0; bottom:0; right:0; background-color: rgba(0,0,0,0.3);}
4
andi

.overlay n'avait pas de hauteur ni de largeur, pas de contenu et vous ne pouvez pas survoler display:none.

J'ai plutôt donné à la division la même taille et la même position que .image et modifie la valeur de RGBA au survol.

http://jsfiddle.net/Zf5am/566/

.image { position: absolute; border: 1px solid black; width: 200px; height: 200px; z-index:1;}
.image img { max-width: 100%; max-height: 100%; }
.overlay { position: absolute; top: 0; left: 0; background:rgba(255,0,0,0); z-index: 200; width:200px; height:200px; }
.overlay:hover { background:rgba(255,0,0,.7); }
2
Andrew Clody

Vous pouvez y parvenir en jouant sur l'opacité de l'image et en réglant la couleur d'arrière-plan de l'image sur le noir. En rendant l'image transparente, elle apparaîtra plus sombre.

<div class="image">
    <img src="http://www.newyorker.com/online/blogs/photobooth/NASAEarth-01.jpg" alt="" />
</div>

CSS:

.image { position: relative; border: 1px solid black; width: 200px; height: 200px; background: black; }
.image img { max-width: 100%; max-height: 100%; }
.image img:hover { opacity: .5 }

Vous devrez peut-être également définir l'opacité spécifique au navigateur pour que cela fonctionne également avec d'autres navigateurs.

1
Sumurai8

Voir ce que j'ai fait ici: http://jsfiddle.net/dyarbrough93/c8wEC/

Tout d’abord, vous ne définissez jamais les dimensions de la superposition, c’est-à-dire qu’elle n’apparaissait pas en premier lieu. Deuxièmement, je vous recommande de modifier simplement l'index z de la superposition lorsque vous passez la souris sur l'image. Modifiez l'opacité/la couleur de la superposition en fonction de vos besoins.

.image { position: relative; width: 200px; height: 200px;}
.image img { max-width: 100%; max-height: 100%; }
.overlay { position: absolute; top: 0; left: 0; background-color: gray; z-index: -10; width: 200px; height: 200px; opacity: 0.5}
.image:hover .overlay { z-index: 10}
0
Davis Yarbrough

Je voudrais donner une hauteur min et une largeur min à votre div superposition de la taille de l'image, et changer la couleur de fond en survol

.overlay { position: absolute; top: 0; left: 0;  z-index: 200; min-height:200px; min-width:200px; background-color: none;}
.overlay:hover { background-color: red;}
0
Jako