-1

Let's say I have a webpage, of a cat staring on me. The image will then start zooming in on the cats eyes. Deeper, and deeper....How can I make this in HTML/CSS/JavaScript?

sanoj00
  • 73
  • 1
  • 2
  • 6
  • 1
    I think it is an interesting question, especially the "on the cats eyes" part. Why closing? – Sebas Mar 30 '13 at 22:45
  • Looking at these other questions could help you: [1](http://stackoverflow.com/questions/135894/zooming-an-element-and-its-contents-an-alternative-to-css3s-zoom-property) - [2](http://stackoverflow.com/questions/2028557/how-to-zoom-in-an-image-and-center-it) - [3](http://stackoverflow.com/questions/6130186/javascript-html-css-zooming) – Ragnarokkr Mar 30 '13 at 22:49
  • @Sebas - The question is overly broad and covers too many topics and I'm assuming the OP needs a lot of cross tech education. – Rob Mar 30 '13 at 22:49
  • 1
    @Rob Seems pretty simple to me, if you ignore the silliness of the question's phrasing... – metadept Mar 30 '13 at 22:55

2 Answers2

5

Apply a CSS3 scale transform:

$("#cat").attr('style', "transform: scale(4,4);-ms-transform: scale(4,4);-webkit-transform: scale(4,4);-o-transform: scale(4,4);-moz-transform: scale(4,4);");

...with a slow CSS3 transition:

#cat {
    transition: transform 120s;
    -moz-transition: -moz-transform 120s;
    -webkit-transition: -webkit-transform 120s;
    -o-transition: -o-transform 120s;
}

...and here's your cat! http://jsfiddle.net/x5uYp/

metadept
  • 7,831
  • 2
  • 18
  • 25
0

Ths isn't zooming, just scaling.

Have an <img /> with your cat, then use JavaScript, with setTimeout every 100ms or so, to increase the width and height attributes.

Dai
  • 141,631
  • 28
  • 261
  • 374