Click on The Image to Enlarge in JavaScript

Click on the image to enlarge JS

This article is about when click on the image to enlarge js. We should create a javascript function to create this.

Code:

<html>
<head>
<title>Enlage image</title>

</head>
<body align="center">
<div>
<img src="./nature.jpg" onclick="enlarge()" id="img" width="50%" height="300px">
<br><br><br><br><br><br><br>
<button onclick="resetimg()">Reset Image</button>
</div>

<script type="text/javascript">
// function for enlarge image
function enlarge(){
img.style.transform="scale(1.5)";
img.style.transition="transform 0.35 ease";
}

// function for reset image
function resetimg(){
img.style.transform="scale(1)";
img.style.transition="transform 0.35 ease"; }
</script>

</body>
</html>

Live preview: Click the below image to see a live demo

See the Pen
Enlage image by Wonderdevelop (@wonderdevelop)
on CodePen.

 

Steps:

  1. In the above code, we first write the general syntax of HTML. To the center, all content set the “align” attribute to the body tag and gives the value “center”.
  2. Then inside the body, We have <img> tag for creating an image and a button tag for resetting the image size inside <div> tag. The img tag has id name “img” and “onclick” attribute has value “enlarge()”. A button tag has “onclick” attribute and value as “resetimg()”.
  3. In Script, we write the function “enlarge()” to enlarge the image when the user clicks on the image. In enlarge function, we first select an image and set the transform scale to (1.5) then set 0.35 transform animation.
  4. Then we write the function “resetimg()” to reset the image when the user clicks on the button. In resetimg function, we have set the transform scale style to default value 1 and the transition transform to default value 0.35. So, user click on the button the image will be coming to normal size.

Leave a Reply