Witam,

Czy ktoś z Państwa wie jak można zrobić taki efekt jak w tym menu ?
http://www.kataloginzyniera.pl/
Po najechaniu jest kolorowa fotka, a potem czrnno-biała.
Znalazłem coś podobnego w CSS i JS, ale to nie jest to samo
w3schools

Będę bardzo wdzięczny za pomoc lub informacje jak to jest zrobione.

Wystarczy przeanalizować źródło strony.

[HTML] pobierz, plaintext 
<style>
/* grafika w linki graficzne middle */
.graflinkmiddle {margin: 7px;}
 
a.ovlink {display: block; width: 80px; overflow: hidden;}
a.ovlink img {display: block;}
a.ovlink:hover img{margin-left: -80px;}
 
a.ovlinkact {display: block; width: 80px; overflow: hidden;}
a.ovlinkact img {display: block; margin-left: -80px;}
</style>
[HTML] pobierz, plaintext 

[HTML] pobierz, plaintext 
<a href="index.php?menu=30" class="ovlink"><img src="obrazki/blue/bronze_linki_graf_1__ov.jpg" alt="" /></a>
[HTML] pobierz, plaintext 

I przykładowy obrazek
http://www.kataloginzyniera.pl/obrazki/blu..._graf_1__ov.jpg

Oczywiście są inne sposoby;)

TO jest CSS
Masz swój obrazek, wrzucasz go do Photoshopa, wybierasz opcje Desaturate (chyba) masz wtedy drugie zdjęcie takie same tylko czarnobiałe.
Tworzysz nowy obraz o tej samej szerokości co ten obrazek i o wysokości dwa razy wysokość obrazka.
Wklejasz tam oba obrazki równo pod sobą.

Teraz w CSS ustalasz dla
a
{
background-image: url("cos.jpg")
width:150px;
height:100px;
}

a dla

a:hover
{
background-position: 0 -100px;
}


I tyle
Najprostrzy sposób bo nie podmienia obrazków, a obraz wczytywany jest tylko raz (zmienia się tylko element obrazka który pokazujemy).

Pozdrawiam

a czyli jest przesuwany obrazek tak ? 80px, a potem -80px
O to w tym chodzi ?

Po najechaniu myszą obrazek przesuwa się o 80px w lewo(margin-left:-80px;), po zjechaniu - wraca na swoje miejsce

@ferrero2

Może i prościej, ale jak masz 8 linków w menu i każdy ma mieć inny obrazek?
Więc w swoim stylu musisz zrobić 8 wpisów , dla każdego linka z innymi obrazkami.
To co rozpisał mi @Szeszek1992 wystarczy w 100%.

Ale dziękuje za zainteresowanie i pomoc