'CSS script on web page cuts off top of image with mouse over

I tried searching this...found some info but can't find how to properly apply this to my CSS script.

I have a simple weebly page I'm working on where a simple mouseover effect zooms the image in.

The mouseover effect works nice, but cuts off the top and bottom of the image...and depending on the image, I've had it cut off the left and right side as well.

Is there a modification to the CSS code that can allow for padding around the image height so that it won't cut off the image when the mouseover zoom effect is applied?

Here's a screenshot of what you currently get... mouseover cutoff image

And the current code...

<body>
<a href="https://www.bodensurfaces.com/cowboy-trail.html">
    <body>
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <style>
            .responsive {
                max-width: 300px;
                height: auto;
            }

            .image3 {
                width: 100%;
                -webkit-transition: all 0.7s ease;
                transition: all 0.7s ease;
            }

            .image3:hover {
                -webkit-transform: scale(1.1);
                transform: scale(1.1);
            }
            
        </style>
        <div class="responsive">
            <img class="image3"
                src="https://www.bodensurfaces.com/uploads/4/5/8/2/45821353/barley-round_orig.png">
        </div>
    </body>
htmlcssmouseover


Solution 1:[1]

Try adding a paddings on the image container like this until there's no visible cut-off:

.responsive {
  max-width: 300px;
  height: auto;
  padding: 20px; /* add paddings on image container */
}

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 J u a N

Related Questions