javascript - Can't figure out how to properly zoom in on the entire webpage -

i need zoom-in on entire page looks this.

i know can on hover, using following css:

.cycle-slideshow img:hover {    transform: scale(1.25);    transition: 20s; }

but i'm not sure how on page load, without enlarging images itself. appreciate advises. in advance!

you'll have use keyframes make zoom in.

css:

@keyframes imageanimation {     0% {         transform: scale(1.0);     }     100% {         transform: scale(1.25);     } }

then call animation wherever want apply it:

#image-container {     width: 600px;     overflow: hidden; }     #myimage {     animation: imageanimation 20s infinite alternate;     width: 600px; }

html:

<div id="image-container">     <img id="myimage" src="myimage.jpg" alt="image"> </div>

here working fiddle. can read more keyframes , how there work here.

If code