onmouseover mit fade?
Hallo zusammen,
ich versuche gerade mit JavaScript Bild Nr. 4 zu ändern, indem man über Bild 1-3 hovert.
Das klappt auch spitze. Aber ich verzweifle gerade daran, hier einen Fade einzubauen :confused: Daran sitze ich jetzt tatsächlich schon etwas länger.
Wäre es möglich, dass mir jemand mal eben hilft? Das ist für euch profis bestimmt nur ein winziger Befehl, den ich aber ums Verrecken nicht finde :smile:
Vielen Dank im Vorfeld!
Der hier verwendete Code
<style> div{
position:absolute;
top:170px;
left:10px;
}
.bild{
opacity:0;
position:absolute;
top:0;
left:0;
transition: opacity 1s ease-in-out;
}
.hov1:hover ~ div .bild1,
.hov2:hover ~ div .bild2,
.hov3:hover ~ div .bild3{
opacity:1;
transition: opacity 1s ease-in-out;
}
</style>
<img class="hov hov1" src="/image/1.png" id="" width="100" height="100">
<img class="hov hov2" src="/image/2.png" id="" width="100" height="100">
<img class="hov hov3" src="/image/3.png" id="" width="100" height="100">
<div>
<img class="bild bild1" src="/image/5.png" width="300" height="150">
<img class="bild bild2" src="/image/6.png" width="300" height="150">
<img class="bild bild3" src="/image/7.png" width="300" height="150">
<img src="/image/4.png" id="change_image" width="300" height="150"></div>