JSFiddle - React, Tailwind, and code Playground

HTML

<div class='general_block'>
    <a class='link' href='#'>
        <div class="outer_block">
            <img src="http://fakeimg.pl/150/" class="internal_block">
        </div>
        <span class='description_good'>Описание товара
        </span><br>
        <span class='cost'>цена</span>
    </a>
</div>

CSS

.general_block{
    border: 1px solid red;
    width: 150px;
    text-align: center;
}
.outer_block{
            width: 150px;
            height:150px;
            display: block;
            overflow: hidden;
        }
        .internal_block:hover{
            display: block;
            transform: scale(1.3, 1.3);
            transition: transform 1500ms;
        }