Bilder mit Hover-Effekt 1 2

Mit 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">
fenster.gif
86 x 96 Pixel
2.7 KB
vorhang.jpg
100 x 100 Pixel
9.8 KB
berge.jpg
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">
Bilder mit Hover-Effekt - Seite: 1 2