HTML + CSS: Adding hover on scale effect for the objects in the image

Introduction

When designing a website, it's important to choose the right images to convey your message effectively. However, sometimes the images may need some adjustments to fit your needs. In this article, we'll discuss how to achieve an on hover effect on the objects of an image.

Problem

Recently, while searching for a doll image for my website on Unsplash, I faced a problem. Although I found an image that I liked, I wanted to add an on hover effect on the doll instead of the whole image.

Solution

My first approach was to remove the background of the doll. However, this method did not remove the green background bits properly. So, I had to set it aside and use an online foreground remover tool to remove the foreground of the same image.

Tip: Mac has inbuilt support of removing background. Right click > Quick actions > Remove background.

So, I removed the foreground of the same image now the doll got removed from the image. For this, I used an online foreground remover tool.

Now, I had two separate images - the background and the doll. To achieve the zoom/scale effect, I placed the doll image overlapping the background image and added an on hover scale effect to the doll image using the following CSS:

-

        .doll{
          transition:transform 1s;
          transform-origin:bottom; /* To stop image overflow */
        }

        .doll:hover{
          transform: scale(1.2);
        }

Conclusion

In conclusion, applying effect on objects in the images can be done by splitting the objects and background of the image and using CSS to add the desired effect. Do you have any related tips or questions? Please share them in the comments section below.