How to fit my picture inside a div when I hover it?

Issue

I got some elements and when I hover them a picture should appear in the div. Now the problem is that, when my picture appears, it's not cut off at the end of the div. It just goes further below the div. How can I make it be cut off at the end of the div?

html

 <div class='shop-card'>
                <div class="title">
                  <?php echo "$thisComposer $thisTitle"; ?>    
                </div>
                <div class="desc">
                  <div>
                    <img src="img/genre.png" alt="">
                    <?php echo "$thisGenre"; ?>
                  </div>
                  <div>
                    <img src="img/instrument.png" alt=""> 
                    <?php echo "$thisInstrument1"; ?>
                    <?php echo "$thisInstrument2"; ?>
                  </div>
                  <div>
                    <img src="img/pen.png" alt=""> 
                    <?php echo "$thisArrangement"; ?>
                  </div>
                  <div>
                    <?php echo "$thisDifficulty"; ?>
                  </div>
                </div>
                <div class="product">
                  <img src="img/<?php echo "$thisSheet"; ?>"></img>
                </div>
</div>

CSS

.shop-card {
  margin: 10px;
  width: 350px;
  height: 300px;
  background: #f5f5f5;
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.3);
  border-radius: 5px;
  padding: 20px;
  text-align: center;
  font-family: 'Open Sans Condensed', sans-serif;
  transition: 1s;
}
.shop-card:hover {
  cursor: pointer;
  scale: 1.02;
}
.shop-card:hover > .product img {
  display: block;
}
.shop-card:hover > .desc {
  display: none;
}

.product img {
  width: 100%;
  position: relative;
  display: none;
}

Solution

You can use object-fit:

https://developer.mozilla.org/en-US/docs/Web/CSS/object-fit

object-fit: contain;

Answered By - JuanDM