Rozjaśnienie obrazka po najechaniu myszką

Data dodania:
02 kwietnia 09
Autor:
Łukasz Rutkowski
Kategoria:
CSS

Efekt rozjaśniania obrazka, podczas najechania myszą bardzo estetycznie wygląda, więc czemu by go nie dodać do naszej strony? Zwiększa to w jakimś stopniu atrakcyjność strony i przyjazność strony dla użytkownika. Sposób na to jest bardzo prosty:
1. Do naszego pliku z kodem CSS(ewentualnie nagłówka) dodajemy taką klasę CSS:

1
2
3
4
5

.obrazek:hover {
filter: alpha(opacity=70);
-moz-opacity: 0.7;
opacity: 0.7;
}

2. Wykorzystujemy to w poniższy sposób:

1

<img src="sciezka_obrazka.rozszerzenie" alt="opis_obrazka" class="obrazek" />

Czyli dodajemy do elementu klasę obrazek.

UWAGA! Aby powyższy kod zadziałał, pod obrazkiem musi być białe tło. W celu przyciemnienia obrazka, można ustawić czarne tło.

Działa pod Internet Explorerem, Firefoxem oraz Operą.

Dodam, że w internecie można napotkać skrypty oparte na JavaScripcie, lecz one i tak bazują na CSSie, więc sposób, który podałem będzie lepszy, ponieważ będzie działał przy wyłączonej obsłudze JS i w pewnym stopniu odciąża komputer użytkownika.

Wynik końcowy

Przykładowy obrazek

~Łukasz Rutkowski