CSS Image Gallery - NO JS!

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

http://codepen.io/elad2412/pen/yfEGp

Screen Shot

How To Save State with CSS

Let's use this HTML and CSS

HTML

<div class="box"></div>

CSS

.box{
  width:100px;
  height:100px;
  background-color:red;      
}

.box:hover{
  transition:9s;
  transform:translateX(300px);
}

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.

CSS

.box{
  /*add this style  to box*/
  transition:99999s;
}

Live Example

That's it we have succeeded to save state to the movment of the box!.

List of psuedo CSS Events:
- :hover

• :target

• :active

• :checked

• :focus

• :visited

If liked this post, you may also like:

• CSS Target Event.

• CSS Click Event?!.

• CSS Game - No JS!.

Enjoy!

I will be happy to get your UPVOTE. You are welcome to follow me or my team @Walla! R&D and endorse my skills.