You can not manipulate the src of an image just by css. But you could try using the image as background for the parent of the image and change the background via css just like:
You can use the element replacement feature of the content property to achieve this.
Note that you can’t set any ARIA or other accessibility related features using this technique so the information you convey will likely be lost to a portion of your user base. (This might be illegal depending on what that information is, who you are, and what control you are in / selling to).
You may wish to set tabindex or wrap the image in a button to make it keyboard/etc accessible.
Also note that :active means "While being clicked on" and not "After being clicked on". CSS doesn’t have an "after being clicked on" pseudo-class (although :focus can suffice in some circumstances).
2
Answers
You can not manipulate the src of an image just by css. But you could try using the image as background for the parent of the image and change the background via css just like:
Hope that helps.
You can use the element replacement feature of the
contentproperty to achieve this.Note that you can’t set any ARIA or other accessibility related features using this technique so the information you convey will likely be lost to a portion of your user base. (This might be illegal depending on what that information is, who you are, and what control you are in / selling to).
You may wish to set
tabindexor wrap the image in a button to make it keyboard/etc accessible.Also note that
:activemeans "While being clicked on" and not "After being clicked on". CSS doesn’t have an "after being clicked on" pseudo-class (although:focuscan suffice in some circumstances).