Szukam Wysuwanie obrazka po najechaniu myszką

Cześć,

Mam pytanie - czy istnieje skrypt, który pozwoli mi na wysuwanie się danego obrazka po najechaniu myszką na określone miejsce? Na przykład gdy moja myszka znajdzie się na awatarze jakiegoś użytkownika to z boku wysunie się obrazek.
Jeśli istnieje już taki plugin to przepraszam, ale nie mogłem znaleźć i proszę o link.

Pozdrawiam serdecznie

Coś na takiej zasadzie: https://jsfiddle.net/Snake_/kv7r0tdp/1/

Już blisko, aczkolwiek chodziło mi raczej o to, że jak najedziesz myszką na dany obrazek, to inny wysuwa się na jego miejsce. Tak jakby zasłania poprzedni. Jak zejdziesz myszką z obrazka to on się chowa i znów masz obrazek 1.

Spójrz, na szybko: https://jsfiddle.net/Snake_/kv7r0tdp/2/

Dokładnie o to chodziło. Dałoby to radę jakoś "upłynnić"? Żeby ten obrazek tak nie migał tylko ładnie się wysuwał? I jak bym mógł prosić to również, żeby z lewej strony. Dziękuję Ci bardzo i pozdrawiam

No to wróćmy do poprzedniej wersji, skoro chcesz z animacją.

Kod HTML:


<div class="obrazek">
    <a href="#"><img src="#obecnyavatar"><span><img src="#nowyavatar" alt="image" /></span></a>
</div>


Kod CSS:


.obrazek { position:relative; width: 100px; height: 100px;}
.obrazek img { width: 100px; height: 100px;}
.obrazek a span { position:absolute;  left: -100px; transition: left .5s linear;}
.obrazek a:hover span { left: 0;  }
.obrazek a:hover span img { width: 100px; height: 100px;}



Demo: https://jsfiddle.net/Snake_/kv7r0tdp/11/

Jeśli chcesz to trochę 'upłynnić' to linear zamień na ease-in-out

Perfekcyjnie Dzięki wielkie jeszcze raz Pozdrawiam

Ardex napisał 05.02.2017, 12:22:
Pamiętaj aby oznaczać temat jako rozwiązany, wybierając najlepsze posty

Jak oznaczyć tematy jako rozwiązane?