Schwarze transparente Überlagerung auf Bildhover mit nur CSS?

Ich versuche, einem Bild eine transparente schwarze Überlagerung hinzuzufügen, wenn die Maus nur mit CSS über dem Bild schwebt. Ist das möglich? Ich habe es versucht:

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

Aber ich kann die Div nicht dazu bringen, aufzutauchen.

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

Ich würde vorschlagen, ein Pseudoelement anstelle des Überlagerungselements zu verwenden. Da Pseudoelemente nicht zu eingeschlossenen imgElementen hinzugefügt werden können, müssten Sie das imgElement dennoch umbrechen .

LIVE BEISPIEL HIER - BEISPIEL MIT TEXT

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

Stellen Sie für das CSS optionale Abmessungen für das .imageElement ein und positionieren Sie es relativ. Wenn Sie ein ansprechendes Bild anstreben, lassen Sie einfach die Abmessungen weg, und dies funktioniert weiterhin (Beispiel) . Es ist nur zu beachten , dass die Abmessungen auf dem übergeordnete Element zu dem im Gegensatz sein muss imgElement selbst sehen .

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

Geben Sie dem untergeordneten imgElement eine Breite des 100%übergeordneten Elements und fügen Sie vertical-align:topes hinzu , um die Standardprobleme bei der Ausrichtung der Grundlinie zu beheben.

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

Legen Sie für das Pseudoelement einen Inhaltswert fest und positionieren Sie ihn absolut relativ zum .imageElement. Eine Breite / Höhe von stellt 100%sicher, dass dies mit unterschiedlichen imgAbmessungen funktioniert . Wenn Sie das Element wechseln möchten, legen Sie die Deckkraft von fest 0und fügen Sie die Übergangseigenschaften / -werte hinzu.

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

Verwenden Sie eine Deckkraft von, 1wenn Sie mit der Maus über das Pseudoelement fahren, um den Übergang zu erleichtern:

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

ENDE ERGEBNIS HIER

Wenn Sie beim Schweben Text hinzufügen möchten:

Für den einfachsten Ansatz fügen Sie einfach den Text als contentWert des Pseudoelements hinzu:

BEISPIEL HIER

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

    /* Other styling.. */
}

Das sollte in den meisten Fällen funktionieren. Wenn Sie jedoch mehr als ein imgElement haben, möchten Sie möglicherweise nicht, dass beim Hover derselbe Text angezeigt wird. Sie können daher den Text in einem data-*Attribut festlegen und haben daher für jedes imgElement einen eindeutigen Text .

BEISPIEL HIER

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

Mit einem contentWert von attr(data-content)fügt das Pseudo-Element den Text aus dem .imageElement - data-contentAttribute:

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

Sie können etwas Styling hinzufügen und so etwas tun:

BEISPIEL HIER

Im obigen Beispiel :afterdient das Pseudoelement als schwarze Überlagerung, während das :beforePseudoelement die Beschriftung / der Text ist. Da die Elemente unabhängig voneinander sind, können Sie für eine optimalere Positionierung ein separates Styling verwenden.

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

CSS3-Filter

Obwohl diese Funktion nur im Webkit implementiert ist und keine Browserkompatibilität aufweist , lohnt es sich, einen Blick darauf zu werfen:

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

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

JSFiddle Demo

Verweise

• https://dvcs.w3.org/hg/FXTF/raw-file/tip/filters/index.html
• http://www.html5rocks.com/de/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/

Ähnliche Themen zu SO

• So verringern Sie die Bildhelligkeit in CSS
• Konvertieren Sie ein Bild in HTML / CSS in Graustufen
• Definierte Kanten mit CSS3-Filterunschärfe

Du warst nah. Das wird funktionieren:

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

Sie mussten das Bild aufsetzen und :hoverdas .overlayCover durch Hinzufügen von right:0;und zum gesamten Bild machen bottom:0.

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

Hier ist eine gute Möglichkeit: nach dem Bild-Div anstelle des zusätzlichen Overlay-Div: 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);}

.overlay hatte keine Höhe oder Breite und keinen Inhalt, und Sie können nicht darüber schweben display:none .

Ich gab dem Div stattdessen die gleiche Größe und Position wie .imageund ÄnderungenRGBA Wert beim Hover .

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

Sie können dies erreichen, indem Sie mit der Deckkraft des Bildes spielen und die Hintergrundfarbe des Bildes auf Schwarz setzen. Wenn Sie das Bild transparent machen, wird es dunkler.

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

Möglicherweise müssen Sie auch die browserspezifische Deckkraft festlegen, damit dies auch in anderen Browsern funktioniert.

Ich würde Ihrem Overlay-Div eine minimale Höhe und minimale Breite der Größe des Bildes geben und die Hintergrundfarbe beim Hover ändern

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

Sehen Sie hier, was ich getan habe: http://jsfiddle.net/dyarbrough93/c8wEC/

Zunächst einmal haben Sie nie die Abmessungen des Overlays festgelegt, was bedeutet, dass es überhaupt nicht angezeigt wurde. Zweitens empfehle ich, nur den Z-Index der Überlagerung zu ändern, wenn Sie mit der Maus über das Bild fahren. Ändern Sie die Deckkraft / Farbe des Overlays entsprechend Ihren Anforderungen.

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