How to enlarge div on hover while maintaining font size?

Question

css

There is such html

<div class='general_block'>
    <a class='link' href='#'>
        <img class='img' scr='/img/pic1.jpg'><!--картинка товара-->
        <span class='description_good'>
            описание товара
        </span>
        <span class='cost'>
            цена
        </span>
    </a>
</div>

Now I do this. The picture increases, but the description and price also increase, and this does not look beautiful.

<style type="text/css">
        .general_block:hover{
           position:relative;
            transform: scale(1.5, 1.5);
            margin-top: 35px;
            margin-bottom: -20px;
        }
</style>

Information about the goods goes in 2 lines of 8 items each. If there was 1 line, then you could simply enlarge the picture. But in my case, when hovering over a product in the first line,
I tried to do it with hover on the image itself

.img:hover{
            margin-top: 25px;
            transform: scale(1.5, 1.5);
            padding-bottom: 17px;
        }

then it shifts the bottom block

Answer 1

It's not entirely clear what you want to achieve. You don't like it when the bottom block moves, but you also don't like the overlap of the bottom block.
Describe how it should be in your opinion)

Answer 2

The img tag doesn't have a closing tag!
In general, it is better to explain to the person to whom you are making a website that it is better to open a whole page with this product by clicking on the picture. This is good for SEO. I don't know how it's called.

Answer 3

Enlarge then not the whole block, but only the picture