I'm not 100% sure you'll be able to achieve this through pure CSS. The
:active
selector only works while the mouse is held down on the element, once released it'll no longer be active and the image would reset back. You could do some magic with having a hidden checkbox, so when clicked it marks the checkbox as checked and then use the
~
selector to make the images transition.
I managed to achieve something similar using the checkbox approach:
Edit fiddle - JSFiddle - Code Playground[
^]
However you might have an easier time trying to come up with a generic solution in Javascript. You could use
data-
attributes to define the images, and a
data-url
to store the target address, then use JS to build the transitions.