In this article, you will learn how to zoom Background Images using HTML and CSS. Nowadays different types of smooth zoom effects are added to the image. Most Background Image Zoom is created by CSS only.
So here I will show you how to zoom the image using CSS. The CSS zoom effect is basically of two types, one zoom-in, and the other zoom out. I will show you two types of designs here. So here you will know how to add zoom in and zoom out in the image.
Smooth Background Image Zoom CSS
Method – 1
CSS Smooth Image Zoom In
This is a CSS zoom-in design that will zoom your image. This is basically a hover background image zoom. As a result, this image will zoom in when you hover over the image.
Using the below HTML, I have added the basic information of this smooth image zoom-in design. I have added the image used here in CSS.
The following CSS has designed the information required for this image zoom-in. First, the webpage is designed and then the width and height of the image are determined.
Transform: scale (1.35) is used to zoom the image. In general, the value of this scale is 1. You can increase its value as needed.
Method – 2
Background Image Zoom Out CSS
The following design is CSS image zoom out. When hovering over the image, the image will zoom out or return to normal.
The code used for zoom-in and zoom-out design is almost the same. However, there is a difference in the value of transform: scale ().
I have created the basic structure of Background Image Zoom with the following HTML. A box has been created here and a text has been added.
Now with CSS, I have designed Smooth Image Zoom Out. Under normal conditions, the image will be on transform: scale (1.55).
This allows us to see the image in zoom mode. When hovering over the image, the image will zoom out.
Hopefully, these two designs above have given you a complete idea of how to create Smooth Background Image Zoom. This method allows you to add zoom effects to any image.