Sovrapposizione trasparente nera sull'immagine al passaggio del mouse con solo CSS?

Sto cercando di aggiungere una sovrapposizione nera trasparente a un'immagine ogni volta che il mouse passa con il mouse sull'immagine solo con CSS. È possibile? Ho provato questo:

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

Ma non riesco a far apparire il div.

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

Suggerirei di utilizzare uno pseudo elemento al posto dell'elemento di sovrapposizione. Poiché non è possibile aggiungere pseudo elementi su imgelementi racchiusi , è comunque necessario avvolgere l' imgelemento.

ESEMPIO IN DIRETTA QUI - ESEMPIO CON TESTO

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

Per quanto riguarda il CSS, impostare dimensioni opzionali sul .imageelemento, e relativamente posizionarlo. Se stai mirando a un'immagine reattiva, ometti le dimensioni e questo funzionerà comunque (esempio) . Vale solo la pena notare che le dimensioni devono essere sull'elemento genitore anziché imgsull'elemento stesso, vedi .

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

Assegna imgall'elemento figlio una larghezza pari a quella 100%del genitore e aggiungi vertical-align:topper correggere i problemi di allineamento della linea di base predefinita.

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

Per quanto riguarda lo pseudo elemento, impostare un valore di contenuto e posizionarlo in modo assoluto rispetto .imageall'elemento. Una larghezza / altezza di 100%garantirà che funzioni con imgdimensioni variabili . Se si desidera eseguire la transizione dell'elemento, impostare un'opacità 0e aggiungere le proprietà / valori di transizione.

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

Utilizzare un'opacità di 1quando si passa con il mouse sopra lo pseudo elemento per facilitare la transizione:

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

RISULTATO FINALE QUI

Se desideri aggiungere del testo al passaggio del mouse:

Per l'approccio più semplice, aggiungi semplicemente il testo come valore dello pseudo elemento content:

ESEMPIO QUI

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

    /* Other styling.. */
}

Che dovrebbe funzionare nella maggior parte dei casi; tuttavia, se hai più di un imgelemento, potresti non volere che lo stesso testo appaia al passaggio del mouse. È quindi possibile impostare il testo in un data-*attributo e quindi avere un testo univoco per ogni imgelemento.

ESEMPIO QUI

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

Con un contentvalore di attr(data-content), lo pseudo elemento aggiunge il testo dall'attributo .imagedell'elemento data-content:

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

Puoi aggiungere un po 'di stile e fare qualcosa del genere:

ESEMPIO QUI

Nell'esempio precedente, lo :afterpseudo elemento funge da sovrapposizione nera, mentre lo :beforepseudo elemento è la didascalia / testo. Poiché gli elementi sono indipendenti l'uno dall'altro, è possibile utilizzare stili separati per un posizionamento più ottimale.

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

Filtro CSS3

Sebbene questa funzione sia implementata solo nel webkit e non abbia compatibilità con il browser , vale la pena dare un'occhiata a:

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

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

JSFiddle Demo

Riferimenti

• https://dvcs.w3.org/hg/FXTF/raw-file/tip/filters/index.html
• http://www.html5rocks.com/en/tutorials/filters/understanding-css/
• https://developer.mozilla.org/en-US/docs/Web/CSS/filter
• http://davidwalsh.name/css-filters
• http://net.tutsplus.com/tutorials/html-css-techniques/say-hello-to-css3-filters/

Argomenti simili su SO

• Come diminuire la luminosità dell'immagine in CSS
• Converti un'immagine in scala di grigi in HTML / CSS
• Bordi definiti con sfocatura filtro CSS3

Eri vicino. Questo funzionerà:

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

Dovevi mettere l' :hoverimmagine sull'immagine e rendere la .overlaycopertina l'intera immagine aggiungendo right:0;e bottom:0.

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

Ecco un buon modo di usare: after sul div dell'immagine, invece del div overlay extra: 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);}

.overlaynon aveva un'altezza o una larghezza e nessun contenuto e non puoi passare il mouse sopra display:none.

Ho invece dato al div la stessa dimensione e posizione .imagee cambia il RGBAvalore al passaggio del mouse.

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

Puoi farlo giocando con l'opacità dell'immagine e impostando il colore di sfondo dell'immagine su nero. Rendendo l'immagine trasparente, apparirà più scura.

<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 }

Potrebbe essere necessario impostare l'opacità specifica del browser anche per farlo funzionare anche in altri browser.

Darei un'altezza minima e una larghezza minima al tuo div di sovrapposizione delle dimensioni dell'immagine e cambierei il colore di sfondo al passaggio del mouse

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

Guarda cosa ho fatto qui: http://jsfiddle.net/dyarbrough93/c8wEC/

Prima di tutto, non hai mai impostato le dimensioni della sovrapposizione, il che significa che non veniva visualizzato in primo luogo. In secondo luogo, ti consiglio di cambiare solo lo z-index della sovrapposizione quando passi il mouse sopra l'immagine. Modificare l'opacità / il colore della sovrapposizione in base alle proprie esigenze.

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