Overlay-Bild bei Hover nur mit CSS

Ich versuche, ein Bild mit einem kleineren Bild, das die Hintergrund-Opazität des ersten Bildes hat, wenn Hover, mit nur CSS überlagern, weil ich nicht in der Lage, das HTML zu bearbeiten.Overlay-Bild bei Hover nur mit CSS

Hier ist ein HTML-Beispiel:

<div class="image"> 
    <a href="http://www.example.com"> 
    <img src="/uploads/2016/08/img1.png" class="rggclImgCenter"> 
    </a> 
</div>

CSS nur verwenden, dachte ich, so etwas wie dieses wäre:

.image:hover { 
    background-image: url('https://cdn4.iconfinder.com/data/icons/ionicons/512/icon-ios7-arrow-right-128.png'); 
}

Aber es wird das Bild nur ersetzen.

Quelle

2016-08-30 zen

Haben Sie nicht das Originalbild haben so ein Bild von meiner eigenen verwendet. Sehen Sie, ob das hilft.

Sie können auch auf diesen Link verweisen: https://jsfiddle.net/askptx0y/

.image:hover { 
 
    background-image: url('https://cdn4.iconfinder.com/data/icons/ionicons/512/icon-ios7-arrow-right-128.png'); 
 
    background-repeat: no-repeat; 
 
    opacity: 1; 
 
} 
 
img:hover { 
 
    opacity: 0.5; 
 
}

<div class="image"> 
 
    <a href="http://www.example.com"> 
 
    <img src="http://www.freedigitalphotos.net/images/img/homepage/87357.jpg" class="rggclImgCenter"> 
 
    </a> 
 
</div>

Quelle

2016-08-30 08:19:21 Sazz

Versuchen Sie, ein :before Element auf :hover hinzuzufügen.

.image a:hover:before { 
    content: ''; 
    display: block; 
    position: absolute; 
    background-image: url('https://cdn4.iconfinder.com/data/icons/ionicons/512/icon-ios7-arrow-right-128.png'); 
}

Quelle

2016-08-30 07:58:08

Dank für Ihre Antwort @ Andrew, aber es wird nur das Bild ersetzen. Was ich möchte passiert ist so etwas [http://i.stack.imgur.com/Wtjqz.png] ohne das Lorem Ipsum. Nur berühren css, weil ich nicht in der Lage bin, den HTML-Code zu bearbeiten – zen

Dann müssen Sie ein ': nachher 'Selektor auf': Hover' für Ihren Link hinzufügen, da ein Overlay ein anderes Element sein sollte, um eine Überschreibung der Hintergrundregel zu vermeiden. Siehe diese SO Frage zum Beispiel http://stackoverflow.com/questions/13233991/combine-after-with-hover. –

könnten Sie die css pseudo element verwenden, wenn Sie nicht möchten (oder können) die HTML ändern.

Bitte awared werden Sie nicht :before oder :after auf img Element verwenden können

Hier ist die CSS:

img { max-width: 300px; } /* the image dimension */ 

.image a { position: relative; display: inline-block; } /* allow :before element positioning easier */ 
.image a:hover:before { 
    position: absolute; 
    top: 30px; left: 40px; /* Where to put the overlay */ 
    display: inline-block; 
    content: ''; /* must have */ 
    width: 300px; height: 164px; /* size of the element */ 
    background-image: url('https://i.kinja-img.com/gawker-media/image/upload/s--pEKSmwzm--/c_scale,fl_progressive,q_80,w_800/1414228815325188681.jpg'); /* URL of the image */ 
    background-size: 300px 164px; /* Resize the image as this dimension */ 
    opacity: .5; /* Transparent rate */ 
}

Sie können es versuchen, auf https://jsfiddle.net/bq9khtz3/

Quelle

2016-08-30 08:16:57

Make Bild Transparenz:

.image a:hover image { 
    opacity: 0; 
}

Zeigen Sie Ihre Hintergrundbild

.image a:hover { 
    background-image: url('https://cdn4.iconfinder.com/data/icons/ionicons/512/icon-ios7-arrow-right-128.png'); 
    /* add other properties */ 
}

Quelle

2016-08-30 08:19:12 Salines

.image:hover img { 
    -webkit-filter: brightness(40%); 
    -moz-filter: brightness(40%); 
    -ms-filter: brightness(40%); 
    -o-filter: brightness(40%); 
} 
.image:hover img:after { 
    content: ''; 
    display: block; 
    position: absolute; 
    background-image: url('https://cdn4.iconfinder.com/data/icons/ionicons/512/icon-ios7-arrow-right-128.png'); 
}

Quelle

2016-08-30 08:22:26 jafarbtech

Overlay-Bild bei Hover nur mit CSS

Antwort

Verwandte Themen