Images are the most important and crucial part of web development. Sometimes, web developers add various effects on images to make the web page more attractive, including flipping the images, zooming in, zooming out effects, and so on. More specifically, in the zoom-in process, an image gets bigger as per requirement. In an image viewer, the zoom-in process is very important. To get this process, users can use the “scale()” and “translate()” methods.
This write-up will examine:
- How to Insert an Image in HTML?
- How to Resize/Zoom-In effect on an Image While Keeping Dimensions in CSS?
How to Insert an Image in HTML?
To add an image in HTML, users must follow these stated steps.
Step 1: Create a “div” Container
First, utilize the “div” element to create a “div” container. Then, insert a class attribute and specify a particular name for it
Step 2: Add an Image
Next, add an image with the help of the “<img>” tag. Inside the img tag, specify the following attributes:
- “src” attribute is used to add a media file.
- “alt” is utilized for showing the text on an image when the image is not displayed due to some reason:
<img src="images 2023.jpg" alt="Image" />
</div>
It can be observed that an image has been added successfully:
How to Resize/Zoom-In effect on an Image While Keeping Dimensions in CSS?
To resize/zoom in effect on an image while keeping dimensions, access the image with an “:hover” effect, and apply “transform” with value “scale(2.0)”
Try out the given instructions mentioned below to do so.
Step 1: Style the “div” Container
Access the “div” container by using the class name “.img-content” and apply the below listed CSS properties:
display: inline-block;
overflow:initial;
margin: 20px 100px;
padding: 40px;
width: 300px;
height: 300px;
background-color: rgb(233, 146, 16);
}
Here:
- “display” property is utilized for setting the display for an image. To do so, the value of this property is set as an “inline-block”.
- “overflow” controls the content that is lengthy for fitting into an area.
- “margin” defines a space on the outermost side of the element’s boundary.
- “padding” is used to allocate space inside the defined area.
- “width” is utilized for setting the element’s width.
- “height” property allocates the particular height for an element.
- “background-color” specifies a color for the backside of an element.
Output
Step 2: Apply hover on Image
Access image with hover effect as “img:hover”:
transform:scale(2.0);
}
Then, apply the “transform” property which is utilized for setting the 2D or 3D transformation for an element. For that purpose, the value of this property is set as scale(2.0). More specifically, the “scale()” CSS function is used for defining the transformation which is utilized for resizing the element on the 2D plane.
Output
That’s all about this post for the zoom-in effect on an image while keeping dimensions.
Conclusion
To resize/zoom in effect on an image, first insert an image in the HTML page, then apply the CSS properties, including “display” to set the display of the element and “overflow”, which is utilized for controlling the content that is too big to fit into an area. After that, access the image with the “:hover” effect and apply the transform property with the value “scale(2.0)” for resizing the element at the 2D plane. This post has explained the method for resizing/zooming in effect on an image while keeping dimension.
