Theodore Steiner Theodore Steiner - 1 year ago 139
jQuery Question

OnLoad Banner Zoomout

I'm trying to recreate a

zoom-out
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').addClass('shrink')
});

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

.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="https://i.pinimg.com/originals/2b/05/14/2b05140a776f25a8047c88fbe2bcbdb9.jpg" alt="">
</div>




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