Theodore Steiner Theodore Steiner - 3 years ago 201
jQuery Question

OnLoad Banner Zoomout

I'm trying to recreate a

animation on an image on page load, like the Wikipedia app. I've got it working so on hover, the image gently zooms out, but I don't know how to work it into an independently firing function. I tried creating a jquery function that just added a class with the new scale but that didn't seem to work.

Can anyone help?

//Function I attempted to Use

$(function() {

.photo {
height: 350px;
widthL 350px;
border: 1px solid;

.photo img {
height: 100%;
width: 100%;
transition: all .5s;
transform: scale(1.2);

.photo:hover img {
transform: scale(1);

.shrink {
transform: scale(1)


<div class="photo">
<img src="" alt="">

Answer Source

You need to create an animation instead of a simple transition. Something like this

@-webkit-keyframes zoom {
    0%   {transform: scale(1);}
    100% {transform: scale(0.8); }

h1 {
    -webkit-animation: zoom 5s 1;
<h1>Hey there, I'm using ANIMATION</h1>

Of course you need to change the with your image :)

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download