Transparentes Mouseover
Nachdem ich schon erklärt habe, wie man fixierte Followerbuttons einfügt, möchte ich heute erklären, wie man Bilder so hinbekommt, dass sie transparent sind und erst bei Mouseover richtig kräftig werden.
Was damit gemeint ist?
Das hier:
Allgemein
Der transparente Mouseover-Effekt wird mit
<style>
img {
opacity:0.4;
filter:alpha(opacity=40); /* For IE8 and earlier */
}
img:hover {
opacity:1.0;
filter:alpha(opacity=100); /* For IE8 and earlier */
}
</style>
erzeugt.
“Opacity” steht hierbei für den Transparent-Wert. 1,0 steht für gar nicht transparent 0,0 wäre komplett durchsichtig.
“Hover” bedeutet, dass dieser Wert in Kraft tritt, sobald die Mouse über “Img” fährt. “Img” steht hierbei für Bild.
Würdet ihr diesen Code so in ein HTML-Gadget einfügen, würde er für alle Bilder gelten, doch oft ist dies nicht erwünscht.
Nur für bestimmte Elemente
Schauen wir uns einmal den Code vom letzten Tutorial an:
<style>
#floatlink {
position:fixed;
right: 10px;
top: 10px;
z-index:100;
}
</style>
Diesen müssen wir ein wenig verändern, doch auch hier reicht es nicht, einfach den Code von oben einzufügen, da dieser dann für alle Bilder des Blogs gelten würde. Wir wollen allerdings nur einige bestimmte Bilder mit dem Mouseovereffekt ausstatten.
Der Code hierfür sieht wie folgt aus:
<style>
#floatlink
{
position:fixed;
right: 10px;
top: 10px;
z-index:100;
}
#floatlink img {
opacity:0.4;
filter:alpha(opacity=40); /* For IE8 and earlier */
}
#floatlink img:hover
{
opacity:1.0;
filter:alpha(opacity=100); /* For IE8 and earlier */
}
</style>
Erklärung:
Das #floatlink vor “Img” definiert in diesem Fall, dass der Mouseover-Effekt nur für diesen Floatlink-Bereich gilt.
Ich hoffe, dass dieses Tutorial weitergeholfen hat.
E.T. von roundaboutme
16. January 2013 at 13:13Wie sieht es aus bei anderen Browsern wie Firefox und Opera bzw. in der mobile Ansicht (Handy)? Oben steht IE…
Jennifer Jäger
16. January 2013 at 13:22Auch bei anderen Browsern funktioniert es super 🙂
In der mobilen Ansicht nicht, da diese ja keinen Cursor besitzt …
E.T. von roundaboutme
16. January 2013 at 13:41😉 okay die Frage nach mobil war jetzt überlegt von mir.
Was ich meinte, was muss ich eingeben damit es bei allen Browsern funktioniert? Sry ich bin da ein echter Dummy.
Jennifer Jäger
16. January 2013 at 13:58Gar nichts… Der Code funktioniert so wie er ist bei allen Browsern 🙂
Carry
16. January 2013 at 13:57Habe es direkt umgesetzt, vielen Dank =)
MissXoxolat
16. January 2013 at 14:19Hat super geklappt – nur kommen die Buttons (oben links) bei mir nun mit dem "Nach Oben"-Button (unten rechts) in die Quere und ziehen den mit nach oben…
Der Code für den "Nach Oben" Button sieht nämlich nicht unähnlich aus.
Jennifer Jäger
16. January 2013 at 17:54Das Problem hatte ich ebenfalls, da ich auf meinem Blog auch beides benutze.
Die Lösung hierfür ist ganz einfach:
Ändere Deinen Nach oben Button Code einfach folgendermaßen ab:
#floatlink1
Und
div id="floatlink1"
Füge also einfach nach "Floatlink" eine "1" an. Dies zeigt dem Browser, dass es sich um zwei unabhängige Elemente handelt 🙂
MissXoxolat
16. January 2013 at 18:11Super, danke dir! Daran hätte ich eigentlich auch denken können… =)
AndyMcLandy
16. January 2013 at 16:48Mal wieder super erklärt ;))
Snowwhite
16. January 2013 at 17:19Tolles Tutorial. Danke!
ChrisTa
16. January 2013 at 17:20oh super, sowas habe ich schon länger gesucht. Dankeschön, werde ich später ausprobieren.
LG ChrisTa
Chiara
16. January 2013 at 18:28Und was macht man, wenn man sich kleine Social Media Icons in die Sidebar einbindet, welche nicht mitscrollen, man möchte diese (bzw. ein Sidebargadget) mit dem Mouseover haben,eventuell noch ein zweites, es befinden sich aber Bilder oder Elemente mit Bilder in der Sidebar, welche nicht diesen Mouse Over Effekt haben sollen ?
Also wie bekommt man einzelne Gadgets in der Sidebar mit Mouse Over ?
Denise
16. January 2013 at 19:27Danke für dein Kommentar 😀 Hab die Schuhe von Vögele! 🙂
Wie cool, Du hast einen Tutorial Blog 😀
*gleichmalfolgen*
LG <3
viola wan
17. January 2013 at 2:58Von dir ist sehr nett!!!
Viola
http://wunderbarkleider.blogspot.com/
Colours and Promises
7. February 2013 at 20:20Hey 🙂
es tut mir leid, ich habe gerade erst angefangen zu bloggen und habe wirklich überhaupt keine Ahnung.. Also entschuldige wenn ich so blöd frage, aber wo muss ich den Code denn eingeben ? Ich wollte das mit den Bildern in der Sidebar immer so haben, deswegen wäre es so lieb, wenn ihr mir helfen könntet..
Liebe Grüße, Alina 🙂
Theresa E.
15. February 2013 at 22:19Huhu
Bis zum transparenten Effekt hat alles super geklappt, aber die Bilder werden nicht kräftig, wenn ich mit der Mouse darüber fahre. Woran könnte das liegen?
Liege Grüße (:
AnniesBeauty House
16. February 2013 at 9:59mal ne ganz blöde Frage… wo genau geb ich denn diesen Code überhaupt ein? Also an welcher Stelle des ganzen html gedöns???
Jenny
7. May 2013 at 14:18und wie macht man, dass es am anfang normal ist und nach dem mouse-over heller wird ?
Anonym
20. October 2013 at 17:10Hey, wie macht man das denn, wenn man noch einen kleinen Text oder ein Wort auf dem Bild eingeblendet haben möchte? Kann mir da vllt. jemand helfen? Danke!
Selma Yilmaz Vega
9. October 2014 at 2:36Ich möchte diesen Transparenten Mouseover Effekt nur auf meine Social Media Icons beziehen. Wie mache ich das und wo packe ich den Code hin? In mein Layout HTML oder ein Widget? Vielen Dank schon mal für die Hilfe 🙂