Showing an image on text hover in different divs

Question

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>

so when you hover on div1 you want image to be shown on div2? — Manjuboyz, Apr 04 '20 at 13:43
When I hover over text with id="text1" in the div with class="textcontainer", I want the figure with id="fig1" to show in the div with class="gallerycontainer". — Marro, Apr 04 '20 at 13:46

Banzay · Accepted Answer · 2020-04-04T13:56:39.963

1

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>

edited Apr 04 '20 at 13:56

answered Apr 04 '20 at 13:55

Banzay

9,310
2
27
46

This works like I want it to, except that I only want the hover effect to work on the "Important text" inside the a tag (sorry for being unspecific in my question explanation). – Marro Apr 04 '20 at 14:01
You don't really need ".textcontainer + " in this scenario but it's nice for clarity. – Jens Ingels Apr 04 '20 at 14:06

score 0 · Answer 2 · answered Apr 04 '20 at 14:02

Hope this helps.

<!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>
.gallerycontainer {
    opacity: 0.0;
    filter: alpha(opacity=40);
}

.textcontainer:hover~.gallerycontainer {
    opacity: 1.0;
    filter: alpha(opacity=100);
}
  </style>
</html>

Showing an image on text hover in different divs

2 Answers2