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

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 >
                  <?php echo "$thisComposer $thisTitle"; ?>    
                </div>
                <div >
                  <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 >
                  <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;
}

CodePudding user response：

You can use object-fit:

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

object-fit: contain;