Hover over part of image shows div on right-hand side

[iijoclu]

Hi guys,

I have the following image http://i64.tinypic.com/2l916oh.jpg

Essentially what I want is that when I hover over the light blue area, the TEXT1 box shows on the right hand side of the image as part of a div. When the mouse is not over the light blue area anymore, text disappears.

Likewise, when I move it and hover over the pink area, the TEXT2 box shows up as part of a div on the right side.

I have struggled to find something that works so any help is welcome.

Thank you!

[Beverleyh]

Googling “hover over div to reveal another div” yields many revelant results so I’d start your research there if I were you.

You should also read up on the following CSS selectors;
– “:hover selector”,
– “general sibling selector ~”,
– “adjacent sibling selector +”

And if you’re rusty on positioning/layout, try here https://learnlayout.com

Should you need any specific help, feel free to post back with your code in a working but simplified CodePen demo, along with a clear description of the problem, what you’d like to happen instead, and what you’ve tried to achieve it, and then we can offer suggestings based on that. Unfortunately we can’t troubleshoot an image.

[Author]

Posts