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.