You might have seen this zoom effect in many websites. It is attractive and simple.

It can be done in many ways. I am going to use CSS transform property to zoom the image.

Here, we'll be using a <div> element to act as the image.

First, we'll build the basic structure using HTML. A parent container containing two <div> elements inside it.

<div id="parent">
    <div id="child-1"></div>
    <div id="child-2">
        Text
    </div>
</div>

This is all the HTML we need.

The <div> inside the parent with the id child-1 acts as the image and the other with id child-2 acts as an overlay.

Next, we'll style this using CSS. We specify the dimensions for parent element. To make sure the image container( <div> with id child-1 ) takes up full width and height we use width : 100% and height : 100%. Now, set the background image. For now, our CSS looks like this:

#parent{
    width : 500px;
    height : 380px;
    border : 1px solid #000;
}

#child-1{
    width : 100%;
    height : 100%;
    background-image : url("image.png");
    background-position : center;
    background-size : cover; 
}

We then add hover effects to our parent element which will affect our child element.

#parent:hover #child-1{
    transform : scale(1.2);
}

Our output will be something like this:

As you can see the image is overflowing the parent element. To fix this we add overflow : hidden to parent element. We'll also add some transition to make the transformation smooth.

#parent{
    width : 500px;
    height : 380px;
    border : 1px solid #000;
    overflow : hidden;
}

#child-1{
    width : 100%;
    height : 100%;
    background-image : url("image.png");
    background-position : center;
    background-size : cover; 
    transition : transform 0.7s;
}

Finally, we'll add an overlay. Inorder to do this, we need to place the <div> with id child-2 over child-1. We can do it using the position : absolute property.

#child-2{
    width : 100%;
    height : 100%;
    display : flex;
    justify-content : center;
    align-items : center;
    background-color : rgba(168,200,230,0.7);
    position : absolute;
    top : 0;
    right : 0;
  }

But wait, this is not what we have expected. Why is the overlay taking up full width and height of the body instead of the parent div?

Well its because elements with absolute positioning are positioned from their offsetParent, the nearest ancestor that is also positioned. In our code, none of the ancestors are "positioned" elements, so the div is offset from body element, which is the offsetParent.

The solution is to apply position : relative to the parent div, which forces it to become a positioned element and the child's offsetParent.

Click here to read more about the position property.

#parent{
    width : 500px;
    height : 380px;
    border : 1px solid #000;
    overflow : hidden;
    position : relative;
}

This is what we get:

For the overlay to appear when hovered, we'll set the initial opacity to 0, and 1 when hovered. We can make it smooth using the transition property.

#child-2{
    width : 100%;
    height : 100%;
    display : flex;
    justify-content : center;
    align-items : center;
    background-color : rgba(168,200,230,0.7);
    position : absolute;
    top : 0;
    right : 0;
    opacity : 0;
    transition : opacity 0.7s;
    color : #000;
    font-size : 1.5rem;
  }

#parent:hover #child-2{
    opacity : 1;
}

Adding link to the whole element

If you want to use this as a link, just surround our HTML code with an <a> tag. Since a <div> element takes up 100% width of its container, the <a> tag also takes up 100% width of the container. To fix this, we have to set display : inline-block to the parent div so that the <a> tag fits just the content.

<a href="example.xyz">
    <div id="parent">
    <div id="child-1"></div>
    <div id="child-2">
        Text
    </div>
</div>
</a>

#parent{
   width : 400px;
   height : 300px;
   border : 1px solid black;
   overflow : hidden;
   position : relative;
   display : inline-block;
}

That's it!!! I hope you liked it.

Thank you for reading :)