Menu boczne - poruszające się obrazki (Lydia)

Gdy mamy grafikę, którą chcemy umieścić w tle kart/stron >klik< możemy sprawić by po najechaniu widzieć inny jej fragment (jak środkowa karta na powyższym podglądzie). Całość opiera się na background-position, gdzie po prostu zmieniamy położenie grafiki, tak by inna jej część była widoczna. Ważne jednak by obrazek był przynajmniej dwa razy szerszy od kart/stron, ponieważ im większe przejście tym ciekawszy jest efekt.

Przechodząc do kodu:

#PageList1 ul a:link, #PageList1 ul a:visited {
background-position: 0% 0%; /*położenie; może być również w pikselach*/
background-image: url("LINK DO OBRAZKA");
color: #fff; /*kolor czcionki*/
display: block;
width: 200px; /*szerokość*/
text-decoration: none; /*brak podkreślenia linku*/
padding: 5px; /*tekst nie przylepia się do ramek*/
text-align: center; /*wyśrodkowanie tekstu; może też być left lub right*/
transition:all 0.5s; /*płynny powrót*/
-moz-transition:all 0.5s;
-webkit-transition:all 0.5s;
-o-transition:all 0.5s;
}

#PageList1 ul a:hover {
background-position: 80% 80% !important;
background-image: url("LINK DO OBRAZKA") !important;
transition:all 0.5s; /*płynne przejście*/
-moz-transition:all 0.5s;
-webkit-transition:all 0.5s;
-o-transition:all 0.5s;
}