CODEWITHSUNDEEP
htmlcssbootstrap-4
PixelPaul
PixelPaul

Reputation: 2801

Bootstrap 4 card on hover overlay image only

I'm using a Bootstrap 4 card. When I hover over any area of the card, and transparent overlay covers the entire card. The effect I want to have is for the overlay to appear over the top image area only, not the entire card.

HTML:

<div class="m-4">
<div class="card" style="width: 18rem;">
  <img class="card-img-top" src="https://via.placeholder.com/150x100" alt="Card image cap">
  <div class="card-overlay"></div>
  <div class="card-body">
    <h5 class="card-title">Card title</h5>
    <p class="card-text">Some quick example text.</p>
  </div>
</div>
</div>

CSS

.card-overlay {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    height: 100%;
    width: 100%;
    opacity: 0;
    transition: .5s ease;
    background: rgba(0, 0, 0, 0.5);
  }

.card:hover .card-overlay {
    opacity: 1;
  }

Link to CodePen

Upvotes: 0

Views: 8191

Answers (3)

hawkstrider
hawkstrider

Reputation: 4341

If you just wrap your image in a div with position: relative and place the overlay and image in there, you can get the effect you are looking for. See the example below.

.card-img-top-wrapper{
  position:relative;
}
.card-overlay {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    height: 100%;
    width: 100%;
    opacity: 0;
    transition: .5s ease;
    background: rgba(0, 0, 0, 0.5);
  }

.card:hover .card-overlay {
    opacity: 1;
  }
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.0/css/bootstrap.min.css" />

<div class="m-4">
<div class="card" style="width: 18rem;">
  <div class="card-img-top-wrapper">
    <div class="card-overlay"></div>
    <img class="card-img-top" src="https://via.placeholder.com/150x100" alt="Card image cap">
  </div>
  <div class="card-body">
    <h5 class="card-title">Card title</h5>
    <p class="card-text">Some quick example text.</p>
  </div>
</div>
</div>

Upvotes: 1

Kenny
Kenny

Reputation: 153

Actually your question is already answering the question itself. The overlay div is taking space of the whole card, not just the image.

https://jsfiddle.net/KennyChoy/1s62bzgk/7/

<div class='wrapper'>
  <div class='img-wrapper'>
    <img src='https://via.placeholder.com/150x100'>
    <div class='overlay'></div>
  </div>
  <div>
    <h3>
      I AM A TITLE
    </h3>
    <p>
      content content content content content content content 
    </p>
  </div>
</div>


.wrapper {
  width: 250px;
  text-align: left;
  padding: 15px;
  border: 1px solid black;
}

.img-wrapper {
  position: relative;
}

img {
  width: 100%;
}

.overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0);
  opacity: 0;
}

.wrapper:hover .overlay {
  opacity: .3;
}

Upvotes: 1

user12700173
user12700173

Reputation:

The problem is all your elements are in the same container. The "card-overlay" div is filling the space of the "card" div so it affects all elements inside it. I solved this problem by making an extra container to hold the image and the image-overlay.

I've changed your code like this:

HTML

<div class="m-4">
<div class="card" style="width: 18rem;">
  
  <!-- A div to hold img and img-overlay -->
  
  <div class="card-image">
    <img class="card-img-top" src="https://via.placeholder.com/150x100" alt="Card image cap">
    <div class="image-overlay"></div>
  </div>
  <!-- -->
  
  <div class="card-body">
    <h5 class="card-title">Card title</h5>
    <p class="card-text">Some quick example text.</p>
  </div>
</div>
</div>

CSS

/* Changing img holder position, so the overlay will be related to it */

.card-image {
  position: relative;
}

.image-overlay {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    height: 100%;
    width: 100%;
    opacity: 0;
    transition: .5s ease;
    background: rgba(0, 0, 0, 0.5);
  }

.card:hover .image-overlay {
    opacity: 1;
  }

CodePen

Upvotes: 3

Related Questions