Vor einiger Zeit hat mich ein Zuschauer von meinem Youtube Kanal gefragt ob ich nicht mal zeigen könnte, wie man einen einfachen Mouse Hover Effekt machen kann. Und aus diesem Grund gibts heute dieses Video. Ihr lernt hier wie man so einen einfachen Effekt aufbauen kann, mit dem man mit der Maus über ein Bild fährt und ein anderes zum Vorschein kommt.

Video

Bild

Als erstes sollte man die Bilder vorbereiten. Am einfachsten geht es wenn man die Bilder alle in die gleiche Grösse zuschneidet – hier in meinem Beispiel sind alle im Format 400x400px.

HTML

Viel HTML gibt es heute nicht. Die Bilder werden nach einander in eine Div eingebaut

1
2
3
4

<div class="container">
      <img src="bild1.jpg" id="bild1" />
      <img src="bild2.jpg" id="bild2" />
    </div>

CSS

Hier ist der Teil im CSS den ihr euch merken müsst. die Container definiert eigentlich nur die Grösse der Bilder, danach checkt ihr die img Bilder durch und danach kommt der Hover-Effekt.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

.container {
  position: relative;
  width: 400px;
  height: 400px;
}
 
.container img {
  position: absolute;
  object-fit: cover;
  transition: 500ms;
}
 
.container #bild2:hover {
  opacity: 0;
  cursor: pointer;
}