nicht angemeldet
Ich möchte eine HTML-Datei laden, die ein Bild anzeigt. Beim Hovern mit dem Mauszeiger über das Bild soll ein zweites Bild darüber geblendet werden. Das CSS hole ich aus einer externen Datei.
Das funktioniert in allen Browsern einwandfrei, außer bei Chrome. Hier wird zunächst das Overlay-Bild geladen und blendet dann sofort über auf das Originalbild. Danach funktioniert der Effekt erwartungsgemäß. Aber dieser Fehler tritt nur auf, wenn das CSS in einer externen Datei steht! Kopiere ich den gesamten Inhalt der CSS-Datei instream in das <style>-Element der HTML-Datei, klappt das auch bei Chrome problemlos!
Hier der Inhalt meiner Dateien zum Nachvollziehen:
hover-bild.HTML:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="hover-bild.css">
<style>
</style>
</head>
<body>
<h2>Fade in Overlay</h2>
<p>Hover over the image to see the effect.</p>
<div class="container">
<img src="BILD-1.JPG" alt="Avatar" class="image">
<div class="overlay">
<img src="BILD-2.JPG" alt="Avatar" class="image">
</div>
</div>
</body>
</html>
hover-bild.CSS:
.container {
position: relative;
width: 30%;
}
.image {
display: block;
width: 100%;
height: auto;
}
.overlay {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
height: 100%;
width: 100%;
opacity: 0;
transition: .5s ease;
background-color: #008CBA;
}
.container:hover .overlay {
opacity: 1;
}
Ich benutze Chrome Version 74.0.3729.157 (Offizieller Build) (64-Bit)
marctrix
JürgenB
Matthias Apsel
Gunnar Bittersmann