Wie programmiere ich einen einfachen Mouse Hover Effekt mit CSS und HTML?

von | Jul 6, 2023 | Allgemein | 0 Kommentare

Schlagwörter: CSS - CSS3 - HTML

Inhaltsverzeichnis

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;
}




0 Kommentare

Einen Kommentar abschicken

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert

WordPress

Allgemein

Technik

Design

Konzept

WordPress Plugins

Interessantes

Vermarktung

Themen

Font / Schriften

Social Media

Youtube

eCommerce

Gemischtes

Kolumne

Webinar

Kurse / Webinare

Meine nächste Webinare / Kurse