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 (Beispiel HIER).









Was damit gemeint ist?

Das hier:

Links: Ohne Mouseover
Rechts: Mit Mouseover (Das bedeutet, dass der Mauszeiger über dem "FB"-Button schwebt)


 

Der transparente Mouseover-Effekt wird mit
<style>
img {
opacity:0.4;
filter:alpha(opacity=40); /* For IE8 and earlier */
}
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.
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.
Für Fragen und Probleme stehe ich wie immer über die Mail Jennie@Cplove.de bereit. 

21 Kommentare

  1. Wie sieht es aus bei anderen Browsern wie Firefox und Opera bzw. in der mobile Ansicht (Handy)? Oben steht IE...

    AntwortenLöschen
    Antworten
    1. Auch bei anderen Browsern funktioniert es super :)
      In der mobilen Ansicht nicht, da diese ja keinen Cursor besitzt ...

      Löschen
    2. ;) 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.

      Löschen
    3. Gar nichts... Der Code funktioniert so wie er ist bei allen Browsern :)

      Löschen
  2. Habe es direkt umgesetzt, vielen Dank =)

    AntwortenLöschen
  3. Hat 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.

    AntwortenLöschen
    Antworten
    1. Das 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 :)

      Löschen
    2. Super, danke dir! Daran hätte ich eigentlich auch denken können... =)

      Löschen
  4. oh super, sowas habe ich schon länger gesucht. Dankeschön, werde ich später ausprobieren.
    LG ChrisTa

    AntwortenLöschen
  5. Und 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 ?

    AntwortenLöschen
  6. Danke für dein Kommentar :D Hab die Schuhe von Vögele! :)

    Wie cool, Du hast einen Tutorial Blog :D
    *gleichmalfolgen*

    LG <3

    AntwortenLöschen
  7. Von dir ist sehr nett!!!
    Viola
    http://wunderbarkleider.blogspot.com/

    AntwortenLöschen
  8. Hey :)
    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 :)

    AntwortenLöschen
  9. Huhu
    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 (:

    AntwortenLöschen
  10. mal ne ganz blöde Frage... wo genau geb ich denn diesen Code überhaupt ein? Also an welcher Stelle des ganzen html gedöns???

    AntwortenLöschen
  11. Dieser Kommentar wurde vom Autor entfernt.

    AntwortenLöschen
  12. und wie macht man, dass es am anfang normal ist und nach dem mouse-over heller wird ?

    AntwortenLöschen
  13. Hey, 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!

    AntwortenLöschen
  14. Ich 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 :)

    AntwortenLöschen

Danke für dein Kommentar! Bitte beachte, dass Beleidigungen & Spam ohne Vorwarnung gelöscht werden. Bitte hab Verständnis dafür, dass wir nicht alle Kommentare beantworten können!

Falls ein Tutorial nicht funktioniert hat, dann schreibe bitte in deinem Kommentar genau, was nicht funktioniert & deinen Bloglink. So kann dir besser geholfen werden!

Du möchtest dich direkt an Mira wenden, um ein Problem zu lösen oder ein Design erstellen zu lassen? Dann schaue doch hier vorbei und melde dich!

 
Lass dir dein Blogdesign von mir gestalten!