Farbe Transparenz-overlay auf hover

Arbeit auf meine persönliche Seite und ich habe Bilder, auf hover-ich hätte gerne ein dunkles rot-overlay, das ist etwas transparent. Bisher waren alle die ich finden kann mit webkit ist die änderung der Helligkeit, Sättigung oder den Farbton des Fotos.

Ich vielleicht hinzufügen, dass diese Funktionen nur funktionieren, wenn ich benennen, Sie zu tags wie "img" und Sie arbeiten nicht mit "class" oder "id".

Jede Hilfe wäre toll.

Hier ist mein code:

html

<div>
<img src="images/amadea/book.jpg" alt="Amadea Bailey- Abstract Expressionist">
</div>

css

img{
    display: block;
}

img:hover{
    -webkit-filter:  grayscale(100%) brightness(51%);
}

InformationsquelleAutor ncuda | 2014-01-29

  1. 4

    Man könnte eine :after pseudo-element ist absolut positioniert relativ zum übergeordneten div Elemente. Das pseudo-element wäre die gleiche Größe wie die Eltern, also es funktioniert für alle img Dimensionen. Es ist im Grunde fügt nur ein transparentes overlay auf :hover auch das erreichen der 'filter', die Sie suchen. Sie können jede Farbe für den hintergrund anpassen, die Transparenz und auch Inhalte hinzufügen..

    BEISPIEL HIER

    div {
    position:relative;
    display:inline-block;
}
div:hover:after {
    content:"\A";
    width:100%;
    height:100%;
    background:rgba(255, 0, 0, 0.5);
    position:absolute;
    top:0;
    left:0;
}
    aus Neugier, in content:"\A";, was bedeutet \A bedeutete, zu tun???
    +1, löschte meine Antwort ... klar ist nachdem ich gepostet
    Es ist ein Zeilenumbruch oder die Patrone zurück. Einer von denen. Es ist nicht unbedingt notwendig, '' würde funktionieren.
    Sie vielleicht wollen, markieren Sie diese Antwort als angenommen, dann...dann markiert er die Fragen als abgeschlossen!! 🙂
    Danke @NoobEditor!

    InformationsquelleAutor Josh Crozier

Schreibe einen Kommentar