All TalkersCode Topics

Follow TalkersCode On Social Media

devloprr.com - A Social Media Network for developers Join Now ➔

Image Hover Zoom Effect In CSS

Last Updated : Mar 11, 2024

Image Hover Zoom Effect In CSS

In this tutorial we will show you the solution of image hover zoom effect in css, we will learn about using CSS how to make zoom effect when we hover on image.

As we know css used to style html elements, here we inserted background image to div element by using style property ‘background-image’.

The url value contain path information of image to be set as background on webpage. Using pseudo class of ‘hover’ we defines ‘transform’ property with scale value so we can create either zoom-in or zoom-out effect on any html elements.

Step By Step Guide On Image Hover Zoom Effect In CSS :-

We can implement styles using three types (i.e inline, external or internal) Internal means we have to define our style within <style> tag in head block and inline means we have use style within element definition, external means we defined our css at separate file with .css extension we have to import by <link> tag within head block.

Here we used internal style method and in our program we defined block of style properties to style div element of html webpage.

First we have to sets div element width and height then only we can insert background image and create zoom effect when we hover over there by using ‘transform’ property to ‘scale’.

<!DOCTYPE html>
<html>
    <head>
        <title>IMAGE HOVER EFFECTS</title>
    <style>
        div{
            background-image: url("bg.jpg");
            width: 30%;
            height: 10rem;
            transition: all;
        }
            div:hover{
                transform: scale(1.2);
            }
    </style>
    </head>
    <body>
        <div></div>
    </body>
</html>
  1. <!DOCTYPE html> tag which is instruct the web browser about what version of HTML file written in.
  2. The<html> tag is used to indicate the beginning of HTML document.
  3. As above shown <head> tag is containing information about webpage and if you need any external file those links are declared here. <title> tag is used for set the webpage title.
  4. Here we defined block of styles for <div> element. The ‘width and height’ property used to sets image size then ‘background-image’ property used to insert background image and the ‘transition’ property used to make smooth movements.
  5. When we have to make effects on hover means we needs to define pseudo class of ‘hover’ within that we have to define what we have to do when we hover on that element.
  6. Here we need to create zoom effect so in css we used ‘scale’ value in ‘transform’ property. When we sets scale value to ‘1 or above’ it creates ‘zoom-in’ effect and so we sets value to ‘1.2’.
  7. Both <head> and <title> tags having their pair end tag, so we need to close the ending tags respectively. If you’re not closed anyone of ending tag properly that is also affect the webpage result.
  8. <body> tag is beginning of main coding part because it contain coding of entire website blocks and elements described here.
  9. Here we added all styles to <div> tag by as we seen earlier at point 4.
  10. Both </body>,</html> tags closed respectively. </body> tag indicates the end of body, Then </html> tag indicates the end of HTML document.

Conclusion :-

In conclusion we are able to know how to create zoom effect when we hover on image using css.

We can also create zoom-out effect same as above we seen but we have to change scale value to ‘0 or below point’.

We can’t define hover like style properties because ‘hover’ is a state or behavior when we mouse over to any html elements on webpage so we have to define as a ‘pseudo’ class.

We can use hover effect on any html elements within pseudo class we can also define different type of animations.

I hope this tutorial on image hover zoom effect in css helps you and the steps and method mentioned above are easy to follow and implement.

Author Image About Riya

A recent graduate with a Bachelor of Technology (B.Tech) in Computer Science from India. She is passionate about leveraging technology to solve real-world problems. With a strong foundation and experience in programming languages such as Python, Django, HTML, CSS, and JavaScript, java, php and have honed her skills through hands-on projects and coursework.

Follow Riya On Linkedin 🡪