Sexy Sliding Image Gallery in Pure CSS3
by nikesh on 06/08/10 at 4:06 pm
There are thousand of javascript based sliding image gallery code/plugins that you can find on internet.Some of those are very nice.But what if we have same effect with CSS3 no use of javascript.So todays post is about a Sliding image gallery which is build in pure CSS3 so no use of javascript.
Below I have attached the snapshot , to view the original output please visit DEMO.
Now let go through the code.
HTML
<div id='image_container'>
<div class='common' id='image_1'>
<img src='../image/img-1.jpg' />
<div class='desc'>This is image 1</div>
</div>
<div class='common' id='image_2'>
<img src='../image/img-2.jpg'/>
<div class='desc'>This is image 2</div>
</div>
<div class='common' id='image_3'>
<img src='../image/img-3.jpg' />
<div class='desc'>This is image 3</div>
</div>
<div class='common' id='image_4'>
<img src='../image/img-4.jpg' />
<div class='desc'>This is image 4</div>
</div>
<div class='common' id='image_5'>
<img src='../image/img-5.jpg' />
<div class='desc'>This is image 5</div>
</div>
</div>
CSS
Image Sliding
#image_container{
height:320px;
width:500px;
overflow:hidden;
position:relative;
}
.common{
margin-left:500px;
position:absolute;
opacity:0;
-webkit-animation-iteration-count: infinite;
-webkit-animation-timing-function: ease-in-out;
-webkit-animation-name: slide;
-webkit-animation-duration: 20s;
}
#image_2{
-webkit-animation-delay:4s;
}
#image_3{
-webkit-animation-delay:8s;
}
#image_4{
-webkit-animation-delay:12s;
}
#image_5{
-webkit-animation-delay:16s;
}
@-webkit-keyframes slide {
0% { margin-left:500px;opacity:1;}
2% { margin-left:0px;opacity:1;}
18% { margin-left:0px;opacity:1;}
20% { margin-left:-510px;opacity:1;}
21% { margin-left:-510px;opacity:0;}
22% { margin-left:500px;opacity:0;}
100% { margin-left:500px;opacity:0;}
}
Description Sliding
.desc{
background-color:#000000;
color:#FFFFFF;
height:25px;
margin-top:-40px;
opacity:0;
padding:8px;
position:relative;
-webkit-animation-iteration-count: infinite;
-webkit-animation-timing-function: linear;
-webkit-animation-name: desc_slide;
-webkit-animation-duration: 4s;
}
@-webkit-keyframes desc_slide {
0% { margin-top:0px;opacity:0;}
20% { margin-top:0px;opacity:0;}
30% { margin-top:-40px;opacity:0.6;}
70% { margin-top:-40px;opacity:0.6;}
80% { margin-top:0px;opacity:0;}
100% { margin-top:0px;opacity:0;}
}
Thats it , pretty simple right.
To view the original output please visit DEMO.
Hope you guys like these effects.Please don’t forget to drop your comments.
LearnWebsiteDesign.com
Aug 21st, 2010
Nice. I believe this is the first CSS image sliding gallery that I’ve seen. I can’t wait for there to be enough support by other browsers to start implementing this in my website templates.
nikesh
Aug 21st, 2010
@LWD .. thanks
August’s Best Resources for CSS3
Sep 27th, 2010
[...] 11. Sexy Sliding Image Gallery in Pure CSS3 [...]
Grigor
Oct 9th, 2010
Simply awesome. Nice job!
yasith
Oct 24th, 2010
its really good coz itz only CSS . i do this with javascript.
nw i can do it more eazy.. thankz.
Gabriel
Nov 17th, 2010
Great tutorial, thank you. The potential uses of CSS3 are great, so far people seem to be just testing it, playing around. This is a nice use and explanation and I’m looking forward to trying out the ideas.
Ariel Garcia Monterrey
Jan 31st, 2011
awesome, really nice gallery, thank you for sharing
Sittipong
Feb 22nd, 2011
Nice, even it’s can be use in Webkit browser only. But it’s the sign of future.
Thank you for sharing.
29+ Interesting CSS3 Tutorials | Pixel2Pixel Design
Sep 6th, 2011
[...] 2. Sexy Sliding Image Gallery in Pure CSS3 [...]
CSS Magic | Achieving Javascript Effects Using Only CSS & CSS3
Dec 28th, 2011
[...] Tutorial [...]
Kavitkar uttam
Apr 22nd, 2012
it better for slider of image
mad
Dec 9th, 2012
Nice but not works in WE
少林圣方官方网站
Feb 26th, 2013
好文章，转载了
giatmedia
Nov 30th, 2013
this is a cool stuff, I wish it could work on IE too
30 Tutorials to Help You Master CSS3
Jan 31st, 2014
[…] CREATE A SLIDING GALLERY […]