Simpler Image Hover Effekt

Ich bin gerade dabei unseren momentanen Banner zu animieren, da der alte Image-Hover-Glow-Effekt ziemlich gut ankam. Es gibt verschiedene Hovereffekte, die recht gut aussehen und sehr einfach einzubauen sind, doch einen Hover-Glow-Effekt auf einer Bilddatei konnte ich nicht ausfindig machen. Effekte, die es ermöglichen einen Bilderrahmen zum Leuchten zu bringen gibt es, doch keinen, der ein ganzes Bild mit diesem Effekt ausstattet.
Ziemlich cool finde ich den  Grayscale Effect von w3schools, den ich momentan über unseren Banner gezogen habe.

hier ein Beispiel:

grayscale_effekt

oder hier der Link um den Effekt auszuprobieren (einfach mit der Maus über den Banner fahren):

Inns_Web Grayscaleeffekt

(der Link wird wahrscheinlich nicht lange mit diesem Effekt funktionieren, da ich irgendwann meinen Glow-Effekt einfügen werde)

Und hier mein Image-Glow-Effekt:

Image_Glow

Image_Glow_fenster

Link (einfach mit der Maus über den Banner fahren):

Inns_Web Image-Gloweffekt

 

Bitte die Slideshow Gallery nicht beachten, sie war/ist ein Test…die komplette Seite dient zu Testzwecken.

Der Image-Hover-Gloweffekt ist im Grunde genommen ganz simpel, hierfür muss man lediglich 2 gleiche Bilder erstellen (eines mit- und eines ohne Gloweffekt). Das erste Bild (ohne Gloweffekt) wird als Hauptimage verwendet und bei Mouseover wird das Bild mit dem Gloweffekt aktiviert. Es ist ein simpler Hover-Befehl, der im CSS und natürlich auch im html festgelegt wird.
Damit das Ganze einen Übergang hat und sich der Effekt langsam ein- und ausschaltet, hab ich eine Transition von 0.7s mit eingefügt. Mit Google Chrome funktioniert alles perfekt, Firefox ignoriert die Transition und braucht ein paar Anläufe auch beim Hovereffekt im Menü und den Internet Explorer brauche ich gar nicht zu erwähnen, der hat generell ein Problem bange_smiley…wobei im Groben und Ganzen die wichtigsten Dinge sichtbar sind und glücklicherweise auch die Farben richtig dargestellt werden.
Bin mega froh, dass alles genau so funktioniert, wie ich mir das vorgestellt habe, zumindest mit Chrome!! party_smiley

– Demnächst werde ich an einem Dunkel-Design arbeiten, damit auch jene die lieber dunkelfarbige Seiten mögen, auch ihre Freude an Inns_Web haben können grins_smiley

Html/CSS: Banner mit Lichteffekt

In den letzten Tagen war ich lange am Rumprobieren. Eigentlich wollte ich ein Logo entwerfen, blieb aber schlussendlich beim Banner stehen. Beim Entwurf eines Logos tue ich mich echt schwer, weil sie eben eher schlicht gehalten werden müssen. Außerdem muss das Logo auch in kleinster Größe erkennbar sein… es ist nicht leicht. Naja, aber den Banner finde ich echt cool, wobei er noch nicht fertig ist. Er hat jedoch schon eine goile Eigenschaft, es geht das Licht an, sobald man mit der Maus darüberfährt 😀  Eine witzige Spielerei, die mir gestern auf Anhieb gelungen ist, ohne nachgoogeln zu müssen, mhmmm 🙂 ^^
Echt mega, ich liebe es..ich könnte von früh-morgens bis spätabends an dieser Seite herumexperimentieren, es ist mega cool. Ja, heute werde ich den Banner noch ausarbeiten und dann mit dem Logo beginnen.

hier mein Lichteffekt-Banner:

Inns_Web 

Man kanns natürlich auch noch steigern xD

wobei ich dieses Beispiel hier eher zum Spaß gemacht habe. Es ist ein einfacher Banner mit Hover-Effekt, also 2 Bilder die mittels Mouseover aktiviert werden 🙂