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='http://www.nikesh.me/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 ().

  2. steve

    May 2nd, 2010

    nice work, thanks for sharing

  3. cna training

    May 2nd, 2010

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

  4. nikesh

    May 2nd, 2010

    @steve @cna … thanks for your comments ..

  5. MarkSpizer

    May 3rd, 2010

    great post as usual!

  6. Simon

    May 17th, 2010

    awesome bud – keep it up.

  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.

  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!

Leave a Reply