Fade-in Image-Link

Grafischer Hover Effekt mit CSS

Nachfolgend 2 Methoden, um einen image-Link zu generieren, der beim darüberfahren mit der Maus (MouseOver) einen fade-in-Effekt bekommen soll.

 

Beide Methoden funktionieren ohne JavaScript und ohne ein zweites, opaktes Bild. Die Aktion wird durch ein einfaches CSS-Script hervorgerufen:

 

Beispiel 1:

(Lösung für html-Widget-Element)

CSS-Code

/*Hintergrundfarbe für css-Overlay
---------------------------------------------*/
a.banner {
display: inline-block;
background: white;
}

/*normale Transparenz für css-Overlay
---------------------------------------*/
a.banner img {
display: block;
opacity: 1;
}

/*Transparenz für css-Overlay bei MouseOver
--------------------------------------------------*/
a.banner:hover img {
opacity: 0.5;
}

html-Code:

 

<div>

<a href="http://example.com/" class="banner">

<img src="http://u.jimdo.com/www32/o/s69854fd484825586/img/i548039a8a761e53a/1402206961/std/image.jpg" alt="" />

</a>

</div>

 

 

Beispiel 2:

(Lösung für normales Bild-Element)

 

Alternativtext
Untertitel

CSS-Code

/*rounded Corners für Image
-------------------------------------------------------*/
#cc-m-imagesubtitle-5894451364 img {
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
}

/*Hintergrundfarbe für css-Overlay
---------------------------------------------*/
#cc-m-5894451364 a {
display: inline-block;
background: white;
}

/*normale Transparenz für css-Overlay
---------------------------------------*/
#cc-m-5894451364 a img {
display: block;
opacity: 1;
}

/*Transparenz für css-Overlay bei MouseOver
--------------------------------------------------*/
#cc-m-5894451364 a:hover img {
opacity: 0.5;
}

 

Neue Elemente erstellen

Beide Methoden benutzen die gleiche Technik. Falls neue Elemente generiert werden sollen kann für Methode 1 einfach der html-code kopiert und angepasst werden. Die Images liegen auf einer versteckten Unterseite und werden jeweils über die Image-Source (img src="...") eingebunden.

 

Für Beispiel 2 muss man sich die ID des Images bzw. die übergeordnete ID für den bereich besorgen und das CSS anpassen (Firefox hilft !)

 

Anmerkung:

Für ältere IE müssen für

opacity: 1;

opacity: 0.5;

die Anweisungen

filter:alpha(opacity=100);

filter:alpha(opacity=50);

ergänzt werden...

 

 

CSS3-Effekt

Für ein lagsameres, entspanntes fade-In/fade-Out ergänze ich noch folgenden CSS3 Code hinter der opacity-Anweisung:

   transition: opacity .50s ease-in-out;
   -moz-transition: opacity .50s ease-in-out;
   -webkit-transition: opacity .50s ease-in-out;

 

 

 

Viel Spaß und...

...may the source be with you!

 

 

 

Kommentar schreiben

Kommentare: 0