Sexy Sliding Image Gallery in Pure CSS3

by 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.

image gallery

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.

15 Responses to “Sexy Sliding Image Gallery in Pure CSS3”

  1. 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.

  2. August’s Best Resources for CSS3

    Sep 27th, 2010

    [...] 11. Sexy Sliding Image Gallery in Pure CSS3 [...]

  3. Grigor

    Oct 9th, 2010

    Simply awesome. Nice job!

  4. yasith

    Oct 24th, 2010

    its really good coz itz only CSS . i do this with javascript.
    nw i can do it more eazy.. thankz.

  5. 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.

  6. Ariel Garcia Monterrey

    Jan 31st, 2011

    awesome, really nice gallery, thank you for sharing

  7. 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.

  8. 29+ Interesting CSS3 Tutorials | Pixel2Pixel Design

    Sep 6th, 2011

    [...] 2. Sexy Sliding Image Gallery in Pure CSS3 [...]

  9. CSS Magic | Achieving Javascript Effects Using Only CSS & CSS3

    Dec 28th, 2011

    [...] Tutorial [...]

  10. Kavitkar uttam

    Apr 22nd, 2012

    it better for slider of image

  11. mad

    Dec 9th, 2012

    Nice but not works in WE :(

  12. 少林圣方官方网站

    Feb 26th, 2013

    好文章,转载了

  13. giatmedia

    Nov 30th, 2013

    this is a cool stuff, I wish it could work on IE too

  14. 30 Tutorials to Help You Master CSS3

    Jan 31st, 2014

    […] CREATE A SLIDING GALLERY […]

Leave a Reply to LearnWebsiteDesign.com