Bilder mit Hover-Effekt
2Mit CSS können Sie einem transparenten Bild (GIF oder PNG-Format) eine andere Hintergrundfarbe geben. Fährt man mit dem Mauszeiger über das Bild, so ändert sich die Hintergrundfarbe zum Beispiel: von Schwarz in Gelb.
Hier habe ich mal sämtliche Spielereien mit Bildern gesammelt die ich aus Langeweile erstellt habe
Ein Licht geht auf
- Hintergrundfarbe wechseln

<style> /* Ein Licht geht auf! */ .image { background-color: #000000; } .image:hover { background-color: #FFFF00; } </style> <img class="image" src="bild.gif" width="22" height="32">
Es wird nur ein transparentes GIF-Bild benötigt
(im Bild ist das innere der Glühbirne transparent).
Die Erleuchtung
- Hintergrundfarbe wechseln mit Farbübergang (Transitions)

In diesem Beispiel wird die Glühbirne langsam heller wenn man mit dem Mauszeiger darüber fährt.
<style> /* Die Erleuchtung! */ .image { background-color: #FFFFFF; transition: background-color 3s; } .image:hover { background-color: #FFFF00; } </style> <img class="image" src="bild.gif" width="30" height="35">
Blinken bis der Arzt kommt
- Hintergrundbild wechseln (mit anim.-GIF)

In diesem Beispiel wechselt die Glühbirne schnell die Hintergrundfarbe (und das Hintergrundbild) wenn man mit dem Mauszeiger darüber fährt.
<style> /* Blinken bis der Arzt kommt! */ .image { background-color: #FFFFFF; } .image:hover { background-color: #FF0000; background-image: url(blink1.gif); } </style> <img class="image" src="bild.gif" width="200" height="132">
Im oberen Beispiel wird noch eine animierte GIF-Grafik benötigt: = blink1.gif
Der Mann im Hintergrund
- Hintergrundfarbe wechseln (Box-Shadow und Transitions)

<style> /* Der Mann im Hintergrund! */ .image { background-color: #000000; transition: box-shadow 3s; } .image:hover { box-shadow: inset 1px 1px 50px 100px #FFFF00; } </style> <img class="image" src="man.gif" width="84" height="128">
Vorhang auf
- Hintergrundbild wechseln

<style> /* Vorhang auf! */ .image { background-color: #000000; background-image: url(vorhang.jpg); } .image:hover { background-image: url(berge.jpg); } </style> <img class="image" src="fenster.gif">
![]() 86 x 96 Pixel 2.7 KB |
![]() 100 x 100 Pixel 9.8 KB |
![]() 100 x 100 Pixel 9.5 KB |
Spieglein, Spieglein …
- Bild spiegeln (Transitions, Transform und Box-Shadow)

<style> /* Spieglein, Spieglein */ .image { background-color: #000000; transition: box-shadow 0.5s; } .image:hover { transform: scaleX(-1); box-shadow: inset 1px 1px 50px 100px #FFD700; } </style> <img class="image" src="man.gif">
Der Ball ist rund …
- Bild drehen (Transitions, Transform[Rotate])

<style> /* Der Ball ist rund! */ .image { transition: transform 0.7s; } .image:hover { transform: rotate(360deg); } </style> <img class="image" src="ball.gif">
Bewege dich
- Bild verschieben (Transitions, Transform[Translate])

<style> /* Bewege dich! */ .image { transition: transform 0.7s; } .image:hover { transform: translate(130px, 0px); } </style> <img class="image" src="ballon.gif">
Große Freundschaft
- Bild vergrößern (Transitions, Transform[Scale])

<style> /* Große Freundschaft! */ .image { transition: transform 0.7s; } .image:hover { transform: scale(2.5, 2.5); } </style> <img class="image" src="bild.gif">
Alles im Lot
- Bild verschieben (Transitions, Transform[Translate])

<style> /* Alles im Lot! */ .image { transition: transform 0.7s; } .image:hover { transform: translate(3em, 3em); } </style> <img class="image" src="bild.gif">
Alles im Rahmen
- Bild verzerren (Transitions, Transform[skewx, skewy])

<style> /* Alles im Rahmen! */ .image { transition: transform 0.7s; } .image:hover { transform: skewx(40deg) skewy(-40deg); } </style> <img class="image" src="bild.gif">
Bildchen Wechsel dich
- Hintergrundbild tauschen (Transform[scaleX])
<style> /* Bildchen wechsel dich! */ #image { width: 190px; height: 190px; background-image: url(bild1.jpg); transition: transform 0.7s; } #image:hover { transform: scaleX(-1); background-image: url(bild2.jpg); } </style> <div id="image"></div>
Rauchen nur mit Filter
(Filter)
![]() filter: blur(5px); |
![]() filter: brightness(0.7); |
![]() filter: contrast(200%); |
---|---|---|
![]() filter: grayscale(100%); |
![]() filter: hue-rotate(90deg); |
![]() filter: invert(100%); |
![]() filter: opacity(30%); |
![]() filter: saturate(70%); |
![]() filter: sepia(100%); |
![]() filter: drop-shadow(16px 16px 10px Yellow); |
![]() |
|
![]() filter: grayscale(100%) hue-rotate(45deg); |
<style> /* Beispiel mit Filter: Blur */ .image { transition: filter 0.9s; } .image:hover { filter: blur(5px); } </style> <img class="image" src="bild.gif">
<style> /* Beispiel 2 mit Filter: Blur */ .image { filter: blur(5px); transition: filter 0.9s; } .image:hover { filter: blur(0px); } </style> <img class="image" src="bild.gif">
Der Schein trügt
- Milchglas-Effekt (Filter)

<style> /* Der Schein trügt! */ .image { filter: opacity(30%); transition: filter 1.5s; } .image:hover { filter: opacity(100%); } </style> <img class="image" src="bild.gif">
Blütenträume
- Farbrad (Filter)
Die CSS-Filter über JavaScript ändern.

<img src="bild.png" id="bild"> <input type="range" min="0" max="360" value="0" oninput="farbrad(this.value)"> <script> // Blütenträume! function farbrad(wert) { document.getElementById("bild").style="filter:hue-rotate("+ wert + "deg)"; } </script>
Blende ein
(Blend-Mode)
CSS Blend-Mode - Ist ein Mischmodus um zwei Ebenen (Hintergrundbild und Hintergrundfarbe) anhand von Farbformeln visuell miteinander zu verschmelzen.
/* Blende ein! */ .image { background-image: url(bild.png); width: 444px; height: 207px; background-blend-mode: Hard-Light; transition: background-color 3s; } .image:hover { background-color: Gold; }
Weitere Beispiele mit » CSS Blend-Mode
Stan & Olli in Farbe
(Farbverlauf)

<style> /* Stan & Olli in Farbe */ .image { background: linear-gradient(to left, Whitesmoke, Gray, Whitesmoke, Black, Whitesmoke, Gray); } .image:hover { background: linear-gradient(to left, Red, Blue, Violet, Yellow, Orange, Deeppink, Cyan, Fuchsia); } </style> <img class="image" src="bild.gif">

„Ich Glotz´ TV” - Animierte Box mit Keyframes
Röntgenblick
(Filter, Keyframes)

<style> .blink { filter: invert(0%); animation: blink 2s steps(50, start) infinite; animation-play-state: paused; } .blink:hover { animation-play-state: running; } @keyframes blink { to { filter: invert(100%); } } </style> <img class="blink" src="bild.gif">