Last Updated: February 25, 2016
·
4.78K
· elad2412

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

Picture

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:

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.

2 Responses
Add your response

Perhaps you meant to link to this example?

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

over 1 year ago ·

Thanks a lot! I didn't notice the mistake :-)

over 1 year ago ·