CODEWITHSUNDEEP
htmlcss
M. Nicol
M. Nicol

Reputation: 123

Flickering when changing visibility with hover

I am having trouble with my HTML and CSS.

I have two containers that are directly over top of one another.

I am trying to make it so when the user hovers the top most container, it hides the top one to reveal the one behind it. This is all done through changing the viability on :hover.

However, I am finding that while it works, it often just results in rapid flickering between the two states.

I have no idea why this is happening and can't seem to figure it out. I tried changing the z-index and position as suggested by other similar posts and couldn't get anything to work.

Code on codepen: https://codepen.io/michaelnicol/pen/jOqYbGo

HTML:

<html>
  <head>
  </head>
  <body>
    <main>
      <div class="image_container">
        <div class="text_div">
          <h1>Mona Lisa</h1>
          <p>Lorem lipsum dolor sit amat</p>
        </div>
      </div>
    </main>
  </body>
</html>

CSS:


/* Formatting Code */

main {
  width: 90%;
  height: 90%;
  min-height: 900px;
  border: 1px solid black;
  background-color: #efefef;
  margin: 5%;
  border-radius: 20px;
  box-shadow: 2px 2px 5px black;
  display: flex;
  justify-content: center;
  align-items: center;
}


body {
  display: flex;
  justify-content: center;
  background-color: rgb(147, 165, 207);
}

.text_div > h1, .text_div > p {
  color: white;
  text-shadow: 2px 2px 5px black;
}

/* image hover code */

.image_container {
  height: 300px;
  width: 400px;
  border: 1px solid black;
  background-color: rgb(156, 48, 48);
  background-image: url("https://i.pinimg.com/474x/c6/90/48/c69048072a6d77dfb0a317db98ef145d.jpg")
}

.text_div {
  visibility: visible;
  opacity: 0.85;
  background-color: black;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  height: 100%;
  width: 100%;
  transition: 0.5s ease-in-out;
}

.text_div:hover {
  visibility: hidden;
}

Upvotes: 0

Views: 301

Answers (1)

Giorgos Iordanidis
Giorgos Iordanidis

Reputation: 161

Try to replace this:

.text_div:hover {
  visibility: hidden;
}

With this:

.image_container:hover .text_div {
    opacity: 0;
    pointer-events: none;
}

Upvotes: 1

Related Questions