CODEWITHSUNDEEP
htmlcssbootstrap-4
Alexandru Cristian
Alexandru Cristian

Reputation: 7

Issue at implementing overlay hover on image cards

Yesterday I was struggling to solve a tracking problem: they are applied to implement a code on w3schools care through, at hover to appear a background on a bootstrap card. Unfortunately, when I place the mouse anywhere on that line, an overlay is triggered. I would like to trigger only in the card area and I cannot solve it.

HTML:

<section class="bgimage">
<div class="container-item ">
  <div class="row justify-content-center">
    <div class="col-md-3">
      <div class="hovereffect">
      <div class="card shadow" style="width: 20rem;">
            <img class="card-img-top" src="images/popit/item1.png" alt="1">

      <div class="card-body text-center">
        <div class="overlay-item">
          <h5 class="card-title">Design</h5>
          <p class="card-text">TEST</p>
        </div>
          </div>
        </div>
      </div>
    </div>
</div>
</section>

CSS(From W3Schools):

.overlay {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  height: 100%;
  width: 100%;
  opacity: 0;
  transition: .5s ease;
  background-color: #008CBA;
}

.container:hover .overlay {
  opacity: 1;
}

Screenshot with issue: https://i.sstatic.net/YAW3E.jpg

Thank you so much!

Upvotes: 1

Views: 836

Answers (3)

JawadR1
JawadR1

Reputation: 399

You don't have container and overlay classes in your html and a div tag is missing from the bottom too.

Upvotes: 0

Mr. Perfectionist
Mr. Perfectionist

Reputation: 2746

  1. You make hover effect on container with this code container:hover but there is no container class in your code.

  2. Hovering overlay class but there is no overlay class in your code. Take a close look.

  3. One missed ending div what the @Loïc Monard told.

Solution:

Create a hover effect on just card

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

overlay-item will be overlay

I think you will get your desired result. Read through the article. You will understand.

Upvotes: 0

Lo&#239;c Monard
Lo&#239;c Monard

Reputation: 690

one closing div tag </div> is missing, make sure to indent properly your code to prevent this kind of mistake.

Upvotes: 1

Related Questions