How can I show element next to image when image is hovered?

Question

I want to show a message when hovering on an image using CSS. I have used the following code :

Code:

.message {
  visibility: hidden;
}

.xyz:hover .message {
  visibility: visible;
}

<div class="abc">
  <img class="xyz">
  <span class="message">Message</span>
</div>

But it's not working.

Answer 1

Next sibling style

.xyz:hover + .message

<div class="abc">
  <img class="xyz">
  <span class="message">Message</span>
</div>

<style>
.message {
    visibility: hidden;
    color: #000;
  }
  
  .xyz {
    min-width: 20px;
    min-height: 20px;
  }
  
  .xyz:hover+.message {
    visibility: visible;
  }
}
</style>

Answer 2

Use this way

.xyz:hover + .message{
   visibility: visible;
}

.message {
  visibility: hidden;
}

.xyz:hover+.message {
  visibility: visible;
}

<div class="abc">
  <img class="xyz" alt="xyz">
  <span class="message">Message</span>
</div>