Animacja zdjęć "Przed i Po (Before and After)"
Przykład wykorzystania CSS3 do animacji zdjęć, a raczej ich przeglądania. Dzięki funkcji onMouseover możemy w elegancki sposób przedstawić zdjęcie np coś co było przed i po.
Kod w Stylach:
<style type="text/css"> a.nowandthen{ a.nowandthen img{ a.nowandthen img:nth-of-type(2){ /* hide "after" image beneath "before" so it's initially out of view */ a.nowandthen:hover img:nth-of-type(1){ /* clip "before" image to reveal "after" */ a.nowandthen.alt{ a.nowandthen.alt img{ a.nowandthen.alt:hover img:nth-of-type(1){ </style> |
W kodzie HTML:
<a class="nowandthen"> <a class="nowandthen alt"> |