Simple Image Overlay Hover Effects image runing out of div

Question

I am creating a card overlay, image is runing out of the div from the bottom.

I want it to stay in div.

Here is the code :

.card {
   width:50%;
   margin:0 auto;
}

.position-relative {
   position: relative !important;
}

.image-hover {
   overflow: hidden !important;
   position: absolute;
}

.image-hover img,
.image-hover {
   transition: transform 1.5s;
   border-radius: 0.2rem;
}

.image-hover:hover img {
   transform: scale(1.5);
   border-radius: 0.2rem;
}

.image-hover:hover {
   background: blue;
}

.overflow-hidden {
   overflow: hidden !important;
}
.card__overlay {
   position: absolute;
   bottom: 0;
   left: 0;
   right: 0;
   width: 100%;
   padding-left: 10px;
   padding-bottom: 10px;
   color: #fff;
}

.overlay__text {
   font-weight: 700px;
}

<div class="card">
   <div class="position-relative image-hover">
      <img src="https://cdn.pixabay.com/photo/2018/03/13/22/53/puzzle-3223941__480.jpg" class="overflow-hidden" alt="wererw" width="100%" height="300" /> 
     <div class="card__overlay">
       <div class="overlay__text">
         <h3>Simple Image Overlay Hover Effects</h3>
         <p>Plan your next adventure</p>
         <a href="#" class="More">Read More</a>
       </div>
     </div>
   </div>
   <div>Some more text</div>
</div>

what is running out of the div here? i dont see anything running out — Ghost Ops, Oct 17 '21 at 11:27
@GhostOps look at the bottom when mouse enter and out image gets different size. — , Oct 17 '21 at 11:28

score 0 · Accepted Answer · answered Oct 17 '21 at 11:32

0

Just add display:block; to your image

answered Oct 17 '21 at 11:32

Alvaro Menéndez

8,766
3
37
57

score 0 · Answer 2 · answered Oct 17 '21 at 11:44

Add height:300px; in .position-relative Like this:

.card {
   width:50%;
   margin:0 auto;
}

.position-relative {
   position: relative !important;
   height:300px;
}

.image-hover {
   overflow: hidden !important;
   position: absolute;
}

.image-hover img,
.image-hover {
   transition: transform 1.5s;
   border-radius: 0.2rem;
}

.image-hover:hover img {
   transform: scale(1.5);
   border-radius: 0.2rem;
}

.image-hover:hover {
   background: blue;
}

.overflow-hidden {
   overflow: hidden !important;
}
.card__overlay {
   position: absolute;
   bottom: 0;
   left: 0;
   right: 0;
   width: 100%;
   padding-left: 10px;
   padding-bottom: 10px;
   color: #fff;
}

.overlay__text {
   font-weight: 700px;
}

<div class="card">
   <div class="position-relative image-hover">
      <img src="https://cdn.pixabay.com/photo/2018/03/13/22/53/puzzle-3223941__480.jpg" class="overflow-hidden" alt="wererw" width="100%" height="300" /> 
     <div class="card__overlay">
       <div class="overlay__text">
         <h3>Simple Image Overlay Hover Effects</h3>
         <p>Plan your next adventure</p>
         <a href="#" class="More">Read More</a>
       </div>
     </div>
   </div>
   <div>Some more text</div>
</div>

Then I can't use same css with another card, all cards have to have same height. **display:block;** did great job. thanks. I upvoted it. — , Oct 17 '21 at 11:46
No problem sir, It would be great if you solve mine question on my profile. — Josef Priboi, Oct 17 '21 at 11:51

Simple Image Overlay Hover Effects image runing out of div

2 Answers2