Sexy Image effect like Flash in Pure CSS3

by on 02/07/10 at 2:55 pm

Till now We all have seen lots of image effect developed in CSS3 like Sexy Image Hover Effects. But today I am going to show a very different image effect using only CSS3.Previously this kind of effect is only possible in flash or js but now this can be done easily in CSS3.
In this example I have used CSS3 animation property and little bit js (js is just for changing the images randomly).

Below I have attached the snapshot , to view the original output please visit DEMO.

Image Effect

Now let go through the code.

Below code is for the first effect.

HTML

<div class='image-outer'>
      <div class='ex1' id='ex1-1'></div>    
      <div class='ex1' id='ex1-2'></div>    
      <div class='ex1' id='ex1-3'></div>     
      <div class='ex1' id='ex1-4'></div>    
      <div class='ex1' id='ex1-5'></div>    
      <div class='ex1' id='ex1-6'></div>    
      <div class='ex1' id='ex1-7'></div>    
      <div class='ex1' id='ex1-8'></div>    
      <div class='ex1' id='ex1-9'></div>    
      <div class='ex1' id='ex1-10'></div>    
      <div class='ex1' id='ex1-11'></div>   
      <div class='ex1' id='ex1-12'></div>   
       <div class='ex1' id='ex1-13'></div>  
       <div class='ex1' id='ex1-14'></div>  
       <div class='ex1' id='ex1-15'></div>  
</div>

CSS

.image-outer{
        height:225px;
        width:400px;
        overflow:hidden;
        -webkit-box-shadow:0px 0px 5px #efefef;
        box-shadow:0px 0px 5px #efefef;
        -moz-box-shadow:0px 0px 5px #efefef;
        padding:4px;
}
.ex1{
        opacity:0;
        background-image:url('/image/01.jpg');
        -webkit-animation-duration: 8s;
        -webkit-animation-iteration-count: infinite;
        -webkit-animation-timing-function: ease-in-out;
        -webkit-animation-name: animation1;
        width:100%;
        height:15px;
}
#ex1-2{
        -webkit-animation-delay:0.2s;
        background-position:0 -15px;
}
#ex1-3{
        -webkit-animation-delay:0.4s;
        background-position:0 -30px;
}
#ex1-4{
        -webkit-animation-delay:0.6s;
        background-position:0 -45px;
}
#ex1-5{
        -webkit-animation-delay:0.8s;
        background-position:0 -60px;
}
#ex1-6{
        -webkit-animation-delay:1s;
        background-position:0 -75px;
}
#ex1-7{
        -webkit-animation-delay:1.2s;
        background-position:0 -90px;
}
#ex1-8{
        -webkit-animation-delay:1.4s;
        background-position:0 -105px;
}
#ex1-9{
        -webkit-animation-delay:1.2s;
        background-position:0 -120px;
}
#ex1-10{
        -webkit-animation-delay:1s;
        background-position:0 -135px;
}
#ex1-11{
        -webkit-animation-delay:0.8s;
        background-position:0 -150px;
}
#ex1-12{
        -webkit-animation-delay:0.6s;
        background-position:0 -165px;
}
#ex1-13{
        -webkit-animation-delay:0.4s;
        background-position:0 -180px;
}
#ex1-14{
        -webkit-animation-delay:0.2s;
        background-position:0 -195px;
}
#ex1-15{
        background-position:0 -210px;
}
@-webkit-keyframes animation1 {
   0%{ width:0;opacity:0;margin-left:200px;-webkit-transform: rotateZ(30deg);}
   10%{  width:400px;opacity:1;margin-left:0px; -webkit-transform: rotateZ(0deg);}
   65%{ width:400px;opacity:1;margin-left:0px;-webkit-transform: rotateZ(0deg);}
   80%{  width:0;opacity:0;margin-left:200px;-webkit-transform: rotateZ(30deg);}
   100%{  width:0;opacity:0;margin-left:200px;-webkit-transform: rotateZ(30deg);}
}

here i m using little bit js for changing the images randomly(used mootools)

JS

As my animation duration is 8s so I have to change background image after 8s.

var imgArr = ['/image/01.jpg','/image/02.jpg' ....];
setInterval ( "changeImage()", 8000 );
function changeImage(){
        var ran = $random(0, imgArr.length-1)
        $$('.ex1').each(function(val){
                val.setStyle('background-image','url('+imgArr[ran]+')');
        });     
}

Thats it.Although there are lots of div’s but the effect look nice, isn’t it.
To view the original output please visit DEMO.
Hope you guys like these effects.Please don’t forget to drop your comments.

38 Responses to “Sexy Image effect like Flash in Pure CSS3”

  1. Mircea

    Jul 6th, 2010

    Nice! Keep articles like this coming!

  2. Pourquoi faut-il se passer d’Internet Explorer? « Artrycom, webdesign, graphisme, tutoriels

    Jul 19th, 2010

    [...] un exemple rencontré sur le site http://nikesh.me qui met à l’honneur un effet apparaissant au passage de la souris sur une photo. Il s’agit de [...]

  3. Ramachandran

    Aug 22nd, 2010

    Hey looks cool and awesome…
    Great work… Thanks for sharing your stuffs…
    Keep rocking..

  4. July’s Best Resources for CSS3

    Sep 2nd, 2010

    [...] 2. Sexy Image effect like Flash in Pure CSS3 [...]

  5. Gayle

    Sep 7th, 2010

    Thank you for showing what CSS3 can do.

  6. July’s Best Resources for CSS3 | ESSAAR ITI Blog

    Sep 14th, 2010

    [...] 2. Sexy Image effect like Flash in Pure CSS3 [...]

  7. July’s Best Resources for CSS3

    Sep 14th, 2010

    [...] 2. Sexy Image effect like Flash in Pure CSS3 [...]

  8. Adriana

    Oct 2nd, 2010

    Beautiful effect. Thank you for sharing the code.

  9. CSS3 Tutorials to Brighten Up Your Day - Noupe Design Blog

    Jan 25th, 2011

    [...] Sexy Image Effects Similar to Flash – in Pure CSS3 Here is a very different image effect that can be achieved by not only using Flash but also CSS3: [...]

  10. fmvilas

    Jan 25th, 2011

    Nice man! Thanks a lot!

  11. 30 примеров того, что можно сделать при помощи CSS3

    Jan 26th, 2011

    [...] 17. Смена изображение при помощи эффектов как в flash [...]

  12. ahkeno

    Jan 27th, 2011

    What’s great work! Thank for sharing..

  13. Gruby

    Feb 25th, 2011

    Great work. :)

    it’d be great, to see the code for animation3.

  14. CSS3 Tutorials to Brighten Up Your Day - desmaksolutions.com | desmaksolutions.com

    Apr 30th, 2011

    [...] Sexy Image Effects Similar to Flash – in Pure CSS3 Here is a very different image effect that can be achieved by not only using Flash but also CSS3: [...]

  15. Tereza

    Jul 20th, 2011

    hi, it´s fantastic, but i have a problem. I need stop the animation in 100% in css. In 0% – opacity is 0 and in 100% is 1 and after that i want to see the full image with opacity 1, but it always turn to opacity 0.

  16. 109 interesantes tutoriales y recursos CSS3 | Digisolnet Blog

    Jul 30th, 2011

    [...] Imagen con efecto estilo flash con CSS3 [...]

  17. CSS3 Tutorial and Resoruces | Avazio

    Aug 17th, 2011

    [...] CSS3 border images •  CSS3 background images •  Flash-style image effect using CSS3 •  Image hover effects using CSS3 •  Creating a Polaroid photo viewer with CSS3 and jQuery [...]

  18. 45+ Handy CSS3 Tools, Tutorials and Resources | CS5 Design

    Aug 23rd, 2011

    [...] Sexy Image effect like Flash in Pure CSS3 [...]

  19. 29+ Interesting CSS3 Tutorials | Pixel2Pixel Design

    Oct 31st, 2011

    [...] Pure CSS3In this tutorial you will learn how to create a sexy sliding image gallery in pure CSS3.3. Sexy Image effect like Flash in Pure CSS3In this tutorial artist is going to show a very different image effect using only CSS3. Previously [...]

  20. keivix

    Jan 11th, 2012

    hi .
    very good …
    but where your pictures ???

  21. CSS3 Tutorials « CSS Tips

    Jan 13th, 2012

    [...] Sexy Image Effects Similar to Flash – in Pure CSS3Here is a very different image effect that can be achieved by not only using Flash but also CSS3: [...]

  22. wei.qing

    Feb 12th, 2012

    Thank for sharing..

  23. dynamic

    Mar 28th, 2012

    really nice work.. ! can you plz send me the code of 4rth picture animation on my email address….

  24. dynamic

    Mar 28th, 2012

    niceee

  25. Dmitry

    May 23rd, 2012

    Very nice sample. I want to use such method

  26. 109 Awesome CSS3 Tutorials & Resources | Internet Web Hosting Blog

    Aug 6th, 2012

    [...] CSS3 border images • CSS3 background images • Flash-style image effect using CSS3 • Image hover effects using CSS3 • Creating a Polaroid photo viewer with CSS3 and jQuery • [...]

  27. Rajesh

    Oct 20th, 2012

    Hi,

    Thank for sharing…. :)

    Tnx

  28. Amith Dandin

    Nov 12th, 2012

    Hello, Its awesome awesome….!

    i really like it

    +918792582039

  29. Handy CSS3 Tools, Tutorials and Resources : HueDesigner

    Jan 5th, 2013

    [...] Sexy Image effect like Flash in Pure CSS3 [...]

  30. CSS3 Tutorials

    Mar 26th, 2013

    [...] Sexy Image Effects Similar to Flash – in Pure CSS3 Here is a very different image effect that can be achieved by not only using Flash but also CSS3: [...]

  31. dapo

    Jul 5th, 2013

    i coudn’t believe it was a pure css until i saw the source code….. ice job keep it up. please send me your twitter handle

  32. dapo

    Jul 5th, 2013

    i coudn’t believe it was a pure css until i saw the source code….. nice job keep it up. please send me your twitter handle

  33. DIVYA

    Oct 5th, 2013

    It’s amazing.
    But I am facing a problem in running script.
    I have placed script in script tag after the style tag.
    Due to thing only one image is repeating itself after every transition. Images are not changing after transition.

  34. CSS3 Tutorials to Brighten Up Your Day | The News Block

    Nov 1st, 2013

    [...] Sexy Image Effects Similar to Flash – in Pure CSS3 Here is a very different image effect that can be achieved by not only using Flash but also CSS3: [...]

  35. Hayden

    Oct 31st, 2014

    Cool stuff! What an impact

    Thank you for sharing

    Regards

  36. Charol

    Jul 28th, 2016

    I love your writing style truly loving this website.

Leave a Reply to Ramachandran