Recently I discover the hidden power of CSS Transition.
With CSS Transition you can save states by using only CSS!.
Here is an example of an Image Gallery with no JS
How To Save State with CSS
Let's use this HTML and CSS
Now on mouse-over the red box will move, but on mouse-out It will get back to her place.
Save CSS State Trick
In order to keep the box state we will need to had It transition for a long period time, and by that it won't go back.
/*add this style to box*/
That's it we have succeeded to save state to the movment of the box!.
List of psuedo CSS Events:
If liked this post, you may also like:
I will be happy to get your UPVOTE. You are welcome to follow me or my team @Walla! R&D and endorse my skills.