html - Zoom only a part of an image in pure CSS

Question

Is it possible to make it so that when the mouse hovers over div blocks with the pc, ps or vr classes, a part of the image is enlarged? I tried to split the original image into 4 parts to zoom them separately, but in this case the whole layout breaks when changing the screen resolution.

The image:

The code:

<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous">
<style>
    .h-30 {
        height: 30vh;
    }
    
    .h-10 {
        height: 10vh;
    }
    
    div {
        overflow: hidden;
    }
    
    .custom-bg-index {
        background-image: url("http://placekitten.com/3840/2160");
        background-position: center;
        background-size: cover;
        background-repeat: no-repeat;
        transition: opacity 300ms linear, transform 300ms linear;
        opacity: 1;
    }
    
    .pc:hover, .ps:hover, .vr:hover {
        opacity: 0.9;
        transform: scale(1.02);
    }
</style>
<div class="container-fluid g-0 h-100 custom-bg-index">
    <div class="row g-0 h-100">
        <div class="col-12 h-30 pc border border-primary">
                <a href="#">

                </a>
        </div>
        <div class="col-12 h-30 ps border border-warning">
            <a href="#">

            </a>
        </div>
        <div class="col-12 h-30 vr border border-success">
            <a href="#">

            </a>
        </div>
        <div class="col-12 h-10 social">
            <a href="#">

            </a>
        </div>
    </div>
</div>

question from:https://stackoverflow.com/questions/66047888/zoom-only-a-part-of-an-image-in-pure-css

Answer 1

This may help you:

The <area> tag defines an area inside an image map (an image map is an image with clickable areas).

<area> elements are always nested inside a <map> tag.

Note: The usemap attribute in <img> is associated with the <map> element's name attribute, and creates a relationship between the image and the map.

An example snippet:

<img src="https://www.w3schools.com/tags/workplace.jpg" alt="Workplace" usemap="#workmap" width="400" height="379">

<map name="workmap">
  <area shape="rect" coords="34,44,270,350" alt="Computer" href="https://example.com">
  <area shape="rect" coords="290,172,333,250" alt="Phone" href="https://google.com">
  <area shape="circle" coords="337,300,44" alt="Cup of coffee" href="https://stackoverflow.com">
</map>