cssAudio - Activefile-genericCSS - ActiveGeneric - ActiveHTML - ActiveImage - ActiveJS - ActiveSVG - ActiveText - Activefile-genericVideo - ActiveLovehtmlicon-new-collectionicon-personicon-teamlog-outoctocatpop-outspinnerstartv headernumbered-list123split-screen
user profile image

A pure css slider that uses opacity for transitions between images. Not yet tested in IE. To make it responsive simply add mediaqueries in for the width/height and position of the



  1. Normal. Check my pure css controlled automatic slider: http://codepen.io/Crook/pen/LldiH

    and other: http://codepen.io/Crook/pen/yObber

  2. Hi.I like your css slider. And I have a question about #slider img#five.Why should set it to opacity:1 then clear to 0 after? I only set the opacity of :target and still work the same. And because I'm a newbie , I confuse that the meaning of the "~" ? Looking forwards your replying. Thanks.

Leave a Comment Markdown supported. Click @usernames to add to comment.

You must be logged in to comment.