JSFiddle - React, Tailwind, and code Playground

HTML

<div class="product">
  <div class="product__image">
    <img src="https://static01.nyt.com/images/2020/06/02/business/02google/merlin_165432900_56dc2cb2-498d-404d-b7fe-83d7baf43977-mobileMasterAt3x.jpg" alt="">
  </div>
</div>

SCSS

.product {
  display: block;
  padding: 5px;
  width: 300px;
  margin-bottom: 10px;
  }

.product__image {
    font-size: 0px;
    outline: 1px solid red;
    outline-offset: -10px;
    overflow: hidden;
    }
    
.product__image img {
      max-width: 100%; 
    }

.product__image:hover {
        transition: 1s;
        transform: scale(1.05);
      }