Solitary CSS3 Slider (Zoom Transition)

Kushagra Agarwal

• 42613
• 30
• 2

I made this very cool slider using just CSS3 (Not a single line of JS or jQuery is used in this slider). 

It uses :target pseudo class to select the current image to be displayed. The ids on images are same as the href of the links so when a link (or navigation button) is clicked, the image corresponding to it will be displayed with a fade animation.

You can use it for free in your websites or play with the code as much you like. However, this slider won't work in Internet Explorer 8 and below. It will work in IE9 but without transition effects.

Also, there's a limitation in this slider that only 5 slides can be used at this time. (You'll have to edit the CSS code if you want to include or remove one or more images from the slider) 

 In this transition, the image gets zoomed-in and fade away to create a stunning transition effect. This is achieved using scale transform and opacity in conjunction with the CSS3 transitions.

Take a look at the code to get the idea.

Related:

• CSS Only Solar System Model
• Minions in pure CSS
• Multiple Box Shadows
• Clicking Game
• CSS3 Room