Showing an image on text hover in different divs

Marro :

I'm new to HTML and CSS and I'm trying to have this (stock) image show on text hover.

I have seen plenty of examples where this works when the image is a child of the div but I want to get it to work between divs, ideally with the id's of elements. I believe my CSS selectors are correct, I'm not sure if what I'm trying to do is invalid. Any help is appreciated, I'm also open to JavaScript solutions.

Edit: I'm looking for a solution where the hover effect only works on the "Important text" within the tag.

<!DOCTYPE html>
<html>
  <head>
  </head>

  <body>

    <div class="textcontainer">
      <p> <a id="text1">Important text</a> other text etc </p>
    </div>

    <div class="gallerycontainer">
      <img id="fig1" src="https://image.shutterstock.com/image-photo/black-male-hand-measuring-invisible-260nw-1070365622.jpg"/>
    </div>

  </body>

  <style>
    #fig1 {
      opacity: 0.0;
      -webkit-transition: all 500ms ease-in-out;
      -moz-transition: all 500ms ease-in-out;
      -ms-transition: all 500ms ease-in-out;
      -o-transition: all 500ms ease-in-out;
      transition: all 500ms ease-in-out;
    }
    #text1:hover + #fig1 {
      /* visibility: hidden;
      display: none; */
      opacity: 1.0;
    }
  </style>
</html>

Banzay :

Here is a solution. You need to follow right selectors chaining

#fig1 {
     transition: all 500ms ease-in-out;
}
.textcontainer + .gallerycontainer #fig1 {
    opacity: 0;
}
.textcontainer:hover + .gallerycontainer #fig1 {
    opacity: 1;
}

<div class="textcontainer">
      <p> <a id="text1">Important text</a> other text etc </p>
    </div>

    <div class="gallerycontainer">
      <img id="fig1" src="https://image.shutterstock.com/image-photo/black-male-hand-measuring-invisible-260nw-1070365622.jpg"/>
    </div>