1

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;
}

1 Answer 1

0

You can use object-fit:

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

object-fit: contain;
1
  • 1
    Oh, wow it's that easy. Thanks!
    – user20573050
    Nov 22, 2022 at 15:34

Your Answer

Reminder: Answers generated by Artificial Intelligence tools are not allowed on Stack Overflow. Learn more

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.