Infinitely Zooming Image in CSS3

by on 02/05/10 at 2:29 am

After my previous post on Social Icon In CSS3 , I have decided to work on CSS3 animation property. So during my search I found a very interesting post on Infinitely Zooming Image . This zooming effect is done in flash. So just for my own interest I tried this Zooming image effect in CSS3.

Zooming Effect

The above image is just a snapshot of my work , the original output can be viewed here  DEMO (this CSS animation will work only on Chorme and safari).

Now let go through the code.

HTML

 <div class='imageOuter' >
<img class='img' id='ani' src='/image/pic.jpg'>
</img>
</div>

CSS

.imageOuter{
        width:200px;
        height:255px;
        overflow:hidden;
        -moz-box-shadow:0px 0px 14px #4FB8FF;
        -webkit-box-shadow:0px 0px 14px #4FB8FF;
        border:2px solid #FFF;
}
.imageOuter:hover{
        -moz-box-shadow:0px 0px 14px #888;
        -webkit-box-shadow:0px 0px 14px #888;
        border:2px solid #FFF;
        cursor:pointer;
}
.img{
        width:815px;
        height:1050px;
        margin-left:-279px;
        margin-top:-350px;
        -webkit-animation-iteration-count: infinite;
        -webkit-animation-timing-function: ease-out;
}
#ani {
        -webkit-animation-name: zoom;
        -webkit-animation-duration: 0.9s;
  }
@-webkit-keyframes zoom {
  0%{ width: 815px;height:1050px;margin-left:-279px;margin-top:-350px;}
 100%{ width: 200px;height:255px;margin-top:0px;margin-left:0px;}
}

I just want to thank John Bezanis for the  flash post , from where I get this animation idea.
Hope you guys like it . Please don’t forget to drop your comments because those comment are real value for me.

9 Responses to “Infinitely Zooming Image in CSS3”

  1. Matthew James Taylor

    May 2nd, 2010

    Nice affect!

    Why do you have a closing image tag? () you can self-close a tag with a forward slash at the end like this ().

    Reply to this comment

  2. steve

    May 2nd, 2010

    nice work, thanks for sharing

    Reply to this comment

  3. cna training

    May 2nd, 2010

    Wow this is a great resource.. I’m enjoying it.. good article

    Reply to this comment

  4. nikesh

    May 2nd, 2010

    @steve @cna … thanks for your comments ..

    Reply to this comment

  5. MarkSpizer

    May 3rd, 2010

    great post as usual!

    Reply to this comment

  6. Simon

    May 17th, 2010

    awesome bud – keep it up.

    Reply to this comment

  7. Cassandra Casolary

    Apr 19th, 2012

    I believe one of your ads caused my browser to resize, you may well want to place that against your black list.

    Reply to this comment

  8. seo techniques

    Jul 28th, 2014

    I do not even know how I ended up here, but I believed this put up used to be good.
    I do not recognize who you are however certainly you’re going to a well-known blogger if you are not already.
    Cheers!

    Reply to this comment

Leave a Reply