htmlcss

Making text appear on hover

I was trying to make a text box appear when I hovered over something different. In my code: I want to hover over the h1 block and make the h3 block appear.

h1.title {
  font-size: 100px;
  background: url(https://upload.wikimedia.org/wikipedia/commons/f/f3/Orion_Nebula_-_Hubble_2006_mosaic_18000.jpg);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  transition: 5.6s ease, 3s transform;
}

h1.title:hover {
  background-position: left;
  transform: translateX(150px) /* Where the .ps would appear */
}

.ps {
  visibility: hidden;
}
<div class="title">
  <h1 class="title">Random Thing</h1>
  <h3 class="ps">Playing around in HTML!</h3>
</div>

Solution

  • You can use the adjacent sibling combinator +: https://www.w3.org/TR/css3-selectors/#adjacent-sibling-combinators

    h1.title:hover + .ps {
  visibility: visible;
}