img-Element bei MouseOver aufhellen

[Senfgeist]

Hi,

ich suche eine einfache Möglichkeit, wie man ein img-Element bei einem MouseOver aufhellen kann, ohne eine weitere Grafik nutzen zu müssen. Das Aufhellen soll außerdem nicht abrupt geschehen, sondern mit einem zwar sehr kurzen aber eleganten Einblenden und Ausblenden.

Kennt da jemand eine Lösung?

Gruß!

 

[Yuuri]

Leg ein weißes div drüber und blende es per rgba oder opacity ein.

 

[Senfgeist]

Hmm, bei mir sind das einzelne SocialIcons direkt nebeneinander. Soweit ich weiß kann man DIVs nicht nebeneinander darstellen, oder?

 

[T0a5tbr0t]

Die Icons in ein div (oder auch span) legen und dem div einen dunklen Hintergrund geben. Das Bild per opacity transparent machen und beim hovern die opacitiy auf 1. Mit einer transistion auf die opacity bekommt man auch einen schönen Übergang. Das müsste der einfachste Weg sein.

Wenn du divs nebeneinander bekommen willst kannst du es per display: inline-block oder mit floats machen.

 

[Senfgeist]

Danke, das probiere ich einfach mal aus!

Ergänzung (1. März 2013)

Habe es jetzt doch anders gelöst. Mit Sprites... das Icon ist im Duplex-Stil zu sehen und bei einem Mouseover erscheint es in seiner korrekten Farbe. Sieht schön aus :-)

Habe also jedem Icon eine eigene DIV-Klasse zugewiesen und dann per CSS z.B. das hier definiert:

    .NAME-icon{
    width:25px;
    height:25px;
    background:url("http://URL ZUM BILD/name-icon.png") top right;
    display:inline-block;
    }

    .NAME-icon:hover{
    background:url("http://URL ZUM BILD/name-icon.png") bottom right;
    }

Funktioniert einwandfrei. Kann ich hier jetzt noch beim Hover eine Transition einbauen, so dass die Grafiken nicht so abrupt dargestellt werden, sondern kurz "einfaden" bzw. "ausfaden" (beim Verlassen des Mauszeigers)? Wenn ja, wie?

 

[T0a5tbr0t]

Nur mit Bildern kann man keine Transition nutzen. Man braucht irgend einen festen Wert der Animiert werden kann (z.B. Farben, Pixel, Längen usw.)
Einen schönen "leucht" Effekt kann man vielleicht noch mit einem box-shadow erzeugen. Da gehen auch Transitions.

Edit: Per Opacity könnte mal zwischen Bildern doch einen weichen Übergang erzeugen. Das alte Bild wird langsam ausgeblendet und das neue eingeblendet. Aber das hab ich noch nie mit Sprites getestet.

 

[Daaron]

Nicht in der Form, wie du es jetzt gebaut hast. Du könntest nur die Verschiebung des BG animieren, aber das wirst du ja kaum wollen.

Aus diesen Codeschnippseln kannst du dir was passendes bauen:

<div style="background-color: #ddd; width: 100px; height: 100px;">
    <div class="icon fb">
    </div>
    <div class="icon tw">
    </div>
</div>

.icon
{
    width: 25px;
    height: 25px;
    display: inline-block;
    position: relative;
    z-index: 0;
}

.fb
{
    background-color: #00f;
}

.tw
{
    background-color: #0f0;
}

.icon:after
{
    -webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
-ms-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
    content: "";
    display:block;
    width: 25px;
    height:25px;
    background-color: rgba(255,0,0,0.5);
    position: absolute;
    z-index: 1;
    left: 0;
    opacity: 1;
}

.icon:hover:after
{
    opacity: 0;
}