Displaying an HTML element when hovering over only with CSS

January 5, 2022

I’m trying to make the text-info element display only when I hover over the container element using only CSS and no JS and it doesn’t work, would love some advice.

I was assuming it had something to do with the display flex instead of display block so I attempted that too, but it didn’t help.

Note that even without the hover, the text doesn’t display on the page and I can’t tell why.

body {
  color: #2f80ed;
  font-family: Avenir, Helvetica, Arial, sans-serif;
  margin: 0;
  display: flex;
  height: 100vh;
}

p {
  margin: 0;
}

.container {
  width: 520px;
  margin: auto;
}

.container img {
  width: 100%;
}

.text {
  width: 400px;
  margin: 0 auto;
  cursor: pointer;
}

.text-code {
  text-align: center;
  font-size: 120px;
  font-weight: 400;
}

.container:hover+.text-info {
  display: flex;
}

.text-info {
  display: none;
  text-align: center;
  font-size: 20px;
  font-weight: 400;
  opacity: 0;
  transition: opacity .4s ease-in-out;
}

footer {
  width: 100%;
  position: absolute;
  bottom: 30px;
}

footer p {
  margin: auto;
  font-size: 16px;
}

footer a {
  color: #2f80ed;
}

<div class="container">
  <img src="empty-boxes.svg" alt="error" />
  <div class="text">
    <p class="text-code">404</p>
    <p class="text-info">
      404 is an error.
    </p>
  </div>
</div>
<footer>
  <p>Go back.</p>
  <a href="https://google.com"></a>
</footer>

>Solution :

You are using the wrong css selector for your hover style. You are using the + selector which is the sibling selector and .text-info is a child not a sibling of .container.

Also, you would need to set your opacity to 1 on hover so that you can see it.

Like this:

.container:hover .text-info {
   display: flex;
   opacity: 1;
}

body {
  color: #2f80ed;
  font-family: Avenir, Helvetica, Arial, sans-serif;
  margin: 0;
  display: flex;
  height: 100vh;
}

p {
  margin: 0;
}

.container {
  width: 520px;
  margin: auto;
}

.container img {
  width: 100%;
}

.text {
  width: 400px;
  margin: 0 auto;
  cursor: pointer;
}

.text-code {
  text-align: center;
  font-size: 120px;
  font-weight: 400;
}

.container:hover .text-info {
  display: flex;
  opacity: 1;
}

.text-info {
  display: none;
  text-align: center;
  font-size: 20px;
  font-weight: 400;
  opacity: 0;
  transition: opacity .4s ease-in-out;
}

footer {
  width: 100%;
  position: absolute;
  bottom: 30px;
}

footer p {
  margin: auto;
  font-size: 16px;
}

footer a {
  color: #2f80ed;
}

<div class="container">
  <img src="empty-boxes.svg" alt="error" />
  <div class="text">
    <p class="text-code">404</p>
    <p class="text-info">
      404 is an error.
    </p>
  </div>
</div>
<footer>
  <p>Go back.</p>
  <a href="https://google.com"></a>
</footer>