Solution 2: At first we need to check that clicked image is enlarged or not while clicking on image. If you define your images as backgrounds instead of img tags, you can easily set the background via CSS using a clever little combination of and the general sibling selector.
Click to Enlarge Thumbnail Image via CSS Without Javascript Injection
To be honest, I would completely re-approach the markup. If you define your images as backgrounds instead of img tags, you can easily set the background via CSS using a clever little combination of :hover and the ~ general sibling selector.
If you arrange your HTML more like this:
You can use this CSS to determine which image shows in the enlarged box:
Basically what this is doing is setting the background of the thumbnail, and then if the user is hovering over the thumbnail, it will select any element with the ‘enlarged’ class which follows in the same nested layer, and apply the background to that too. We’re using !important here because we want the hover to take precedence over the click, which brings us to the next part!
This is essentially telling the browser to apply styles based on the hash at the end of the URL. When the «target» (hash) matches the ID of the element in question, it will apply those styles. Then of course we use the ~ general sibling selector in the same way.
Here’s a working codepen example to play with!
Make each image Clickable to enlarge in a collage, Yes, this is entirely possible. Please consider using Image Map capability of HTML5 for this. It is widely being used to create clickable
How to enlarge pictures when clicked in HTML
In this video I will show you how to enlarge pictures when clicked in a very simple way Duration: 1:11
How to make the images bigger when clicked? JavaScrpit
You can use a modal for this. Have a image tag inside the modal, and hide the entire modal by default.
.modal < display: none; /* Hidden by default */ position: fixed; /* Stay in place */ z-index: 1; /* Sit on top */ padding-top: 50px; /* Location of the box */ left: 0; top: 0; width: 100%; /* Full width */ height: 100%; /* Full height */ overflow: auto; /* Enable scroll if needed */ background-color: rgb(0,0,0); /* Fallback color */ background-color: rgba(0,0,0,0.4); /* Black w/ opacity */ >.modal-content < margin: auto; text-align: center; >.modal-image
When the image is clicked, show the modal and set the src of the modal image to which image triggered the event.
// Get the gallery box var imageBox1 = document.getElementById("imageBox1"); // Get the modal image tag var modal = document.getElementById("myModal"); var modalImage = document.getElementById("modal-image"); // When the user clicks the big picture, set the image and open the modal imageBox1.onclick = function (e) < var src = e.srcElement.src; modal.style.display = "block"; modalImage.src = src; >;
You can also add a «X» that will close the modal as I added in my example below:
You need to create a popup window with an image element inside:
In CSS you need to make the backdrop element as fixed:
position: absolute; width: 500px; height: auto; top: 50%; // to put it in the middle left: 50%; transform: translate(-50%, -50%);
And finally img element should have max-width as 100% .
Also you need to make open/close functionality, to do that you need to set display: block/none on the backdrop element accordingly on click
How to make the images bigger when clicked? JavaScrpit, You can use a modal for this. Have a image tag inside the modal, and hide the entire modal by default.
Enlarging and rescaling a picture down onclick in HTML/JS
You don’t need multiple functions. Just use JS this keyword for each function call.
var imgEnlarged = 0; var otherEnlargedImgs = [0, 0, 0, 0, 0, 0, 0, 0,]; function imgEnlarge(e) < if (imgEnlarged==0)< //Basic function if no enlarged, enlarge click element e.style.width = "400px"; imgEnlarged = 1; otherEnlargedImgs[e] = 1 >else if (imgEnlarged==1) < //If an image is enlarged, is it this one? If so, resize image e.style.width = "300px"; imgEnlarged = 0; otherEnlargedImgs[0] = 0 >else if (imgEnlarged==1 && imgEnlargedOther==1) < //if enlarged, which? Close other, open current element e.style.width = "300px"; imgEnlarged = 1 otherEnlargedImgs[0] = 1 >> function imgAssign() <>
At first we need to check that clicked image is enlarged or not while clicking on image. If clicked image is enlarged then its width should be set to 300px. After that we need loop through the images. Please see the code below:
img
Notes: HTML id attribute value cannot be started with digits. Also notice I have set width of the images to 300px in the style tag.
In HTML, we can click on an image to enlarge it with the help of the JavaScript getElementById() method and by targeting the width and height properties of the image.
The best way to show this is with an example.
Let’s say we have the following HTML:
If we want to enlarge the image to be double its width and height, we can use the getElementById() method to target the image and then change its width and height properties in the following JavaScript code.
When clicking on the image, the image will now double in size.
Note this can also be done in jQuery using the jQuery css() method.
Let’s see this example in action.
Clicking on an Image to Enlarge It Using JavaScript
In this example, we will have an image that we will want to enlarge. The image will have a width of 150px and a height of 150px.
Here is the simple HTML code for this example:
We will use an onclick event to run the function “enlargeImg()” when the user clicks the image.
We can then use the getElementById() method to target the width and height properties of the image and use it to enlarge our image.
We can take our code from the example in the above section and put it into our function called enlargeImg().
Below is the JavaScript code which will allow the user to be able to double the size of the image:
The final code and output for this example on clicking on an image to enlarge it in HTML is below:
Hopefully this article has been useful for you to understand how to in HTML, click on an image to enlarge it.
Other Articles You’ll Also Like:
1. for each char in string – How to Loop Over Characters of String in JavaScript
2. Using JavaScript to Get the Current Year
3. innerHTML vs outerHTML
4. Using JavaScript to Stop a Timer
5. React Axios Interceptor to Prevent Infinite Loops in JWT Authentication
6. Using JavaScript to Get the Decimal Part of a Number
7. getDate JavaScript – Get the Current Day of the Month in JavaScript
8. Using JavaScript to Check if Array is Empty
9. Using JavaScript to Get the Host URL
10. Using Javascript to Check if Value is Not Null
About The Programming Expert
The Programming Expert is a compilation of a programmer’s findings in the world of software development, website creation, and automation of processes.
Programming allows us to create amazing applications which make our work more efficient, repeatable and accurate.
At the end of the day, we want to be able to just push a button and let the code do it’s magic.
Use HTML and JavaScript to Enlarge the Image When the User Clicks on the Image
This article will teach us to enlarge the HTML image when users click or hover over a particular image.
As a user of the image gallery, you would have seen the user interface where multiple images reside and when you hover over a single image, it enlarges. We will learn different methods in this article to enlarge images by hovering over or clicking.
Change the Size of the HTML Image on Hover
We can enlarge a particular image using HTML and CSS when the user hovers over that. In the example below, we have created five img elements with different values of the src attribute.
Here, users can see that all images will be displayed inline in the same row.
We have also used CSS styling to set the height and width of every image element. We’ve assigned a 200px height and width for every element.
We’ve also set a 10px margin for every img element to leave space around the image.
We used the CSS’s : hover property to add the hover effect. Inside the img: hover block of CSS, we have set a 400px height and width for the image element, which means that whenever users hover over the image, it will be scaled by 2x.
In the above output, users can see that when we hover over any image, the size of that image increases.
Also, we can use the transform CSS property to enlarge the HTML image. The transform property allows us to transform any HTML element and an image is one of them.
It means we can do scaling, rotating, translation, etc., with the image. Here, we will apply the scaling on the image to enlarge it.
In the below example code, we have added the transform: scale(2) CSS style inside the img:hover block. It will multiply the image’s height and width by 2 when the user hovers over the particular image.
The transform: scale(multifactor) takes the single parameter called multifactor . So, it increases the size of the element by multifactor .
In our case, we have used the 2 as a value of multifactor , so it will enlarge the image by 2x.
img:hovertransform:scale(2);>
Use HTML and JavaScript to Enlarge the Image When the User Clicks on the Image
We can use HTML and JavaScript to enlarge the image when the user clicks on the image. In this example, we have created five HTML images and assigned height and width to every img element as an attribute.
In JavaScript, we have accessed all img elements by the tag name, which is stored inside the images variable. After that, we iterated through the images array and added the addEventListener method to every image.
The addEventListner method takes two arguments; the first argument is a type of event, and another is the callback function. Here, we have used the click event as the first argument, so the callback function will be executed whenever users click on any image element.
We can change the style of the img element using the element.style property. Here, we have used the image[i].style.transfrom property in JavaScript to apply the CSS transform property to the image element.
Inside the callback function, we are iterating through the images array to resize the other images except for the clicked image. Next, we are changing the transform style to scale(1.3) for the clicked element.
Also, we have added some margin to the clicked element for a better look using JavaScript.
var images =document.getElementsByTagName("img");for (var i =0; i images.length; i++) images[i].addEventListener("click", function () for (var j =0; j images.length; j++) if (i != j) images[j].style.transform ="scale(1)";>>this.style.transform ="scale(1.3)";this.style.margin='40px'>);>
In the above output, users can observe that when we click on the image, it enlarges, and other images resize to their original size. Also, there is no effect when we hover over the image.
We have learned three different methods to enlarge images in this article. The first two methods use the CSS : hover property, and the third uses the JavaScript addEventListener method.
Shubham is a software developer interested in learning and writing about various technologies. He loves to help people by sharing vast knowledge about modern technologies via different platforms such as the DelftStack.com website.
