Как увеличить div при наведение с сохранением размера шрифта?

Question

[Arx777]

Есть такой 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>

Сейчас делаю так. Картинка увеличивается, но и увеличивается описание и цена, а это смотрится не красиво.

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

Информация о товарах идет в 2 строки по 8 шт в каждой. Если бы была 1-а строка, то можно было бы просто картинку увеличить. Но в моем случае при наведение на товар в первой строки

Пробовал при hover по самой картинки делать

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

тогда он сдвигает нижний блок

Comments

[Arx777]

Есть 2-а решения, они в комментах в первом (лучшем) ответе:)

Answer 1

[Денис]

Не совсем понятно, чего вы хотите добиться. Вам не нравится, когда сдвигается нижний блок, но так же не нравится и перекрытие нижнего блока.
Опишите, как оно должно быть по-вашему )

Comments

[Arx777]

Мне нравится больше первый вариант, только, чтоб шрифт не увеличивался, а оставался, как до наведения.

[Денис]

Arx777: Такой вариант не подойдет? codepen.io/SvDen/pen/NGEzjy (рамка для наглядности)

[Arx777]

Денис: Благодарю.:)
Я, только, немного по другому в итоге сделал.:)

Если кому интересно, то вот:
https://jsfiddle.net/boakr0vw/

[mr_dev1l]

Денис: вариант конечно может такой быть, но будет некрасиво. Большинство картинок по умолчанию прижаты сверху и снизу к краям белой рамки. Будут сильные обрезания, что не есть хорошо и не информативно

[Денис]

mr_dev1l: Может и так, но нужно смотреть по контексту )

Answer 2

[Александр Пупкин]

У тега img нет закрывающего тега!

<img src="" >

И вообще лучше объясните тому, кому вы делаете сайт, что лучше по клике на картинку открывать целую страницу с этим товаром. Это хорошо в качестве SEO. Не знаю как правильно это называется.

Comments

[Денис]

Там полно синтаксических ошибок )

[Arx777]

Подправил ошибки. Благодарю за внимание:)
Просто html для примера написал. Не рабочий.:)

Answer 3

[mr_dev1l]

Увеличивайте тогда не весь блок, а только картинку

Comments

[Arx777]

Если увеличивать всю картинку, то будет сдвигаться нижний ряд картинки, либо будет наезжать на текст описания. Я об этом писал в вопросе.:)
В принципе, решение уже найдено. Благодарю за участие.:)

[mr_dev1l]

Arx777: нижний ряд сдвигаться не будет) сделайте scale поменьше и отступ от картинки к заголовку побольше и будет вам счастье)