CODEWITHSUNDEEP
javascriptjquery
Eddie
Eddie

Reputation: 390

Scale image to grow on page load

I have had a look around for a solution to this and came across this question/answers Enlarge an image from zero to full size on image load However, this has not given me much help in getting it to scale.

The closet I have got so far is below and here it is in a JSFiddle. I am trying to get my image to scale/grow over a short period of time.

Thanks in advance. 

$("img").load(function() {
  $(this).addClass("loaded");
});
img {
  height: 300px;
  width: 500px;
  margin: 100px;
  transition: transform 5.5s;
  transform: scaleX(0.5) scaleY(0.5);
}

img.loaded {
  transform: scaleX(1) scaleY(1);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<img src="https://static.independent.co.uk/s3fs-public/thumbnails/image/2017/09/12/11/naturo-monkey-selfie.jpg?w968h681">

Upvotes: 0

Views: 283

Answers (1)

Malith
Malith

Reputation: 980

Problem is the class is not adding to your image tag after loaded.

jQuery is not loaded to your page.

Try with javascript 

var images = document.getElementsByTagName("img");
var i;

for(i = 0; i < images.length; i++) {
    images[i].className += " loaded";
}

working demo : https://jsfiddle.net/malithmcr/cewjzdrn/1/

Upvotes: 1

Related Questions