Clickable image appear on hover

Question

I'm currently going around in circles and was hoping someone could help. I have tried using this post as a reference , but can't get it to work properly.

I have an image that needs to have the effect that when you hover over a certain part of the image that specific section appears and is clickable. As this will be appearing on an intranet site and I will be supplying the code and images, I want the easiest way possible.

I have so far tried, an image map, span, div and unordered list, each having there own problems and the more I search, the more I am getting confused.

Is the best way to cut up the image and appear on hover using straight CSS.

EDITED Thanks @Nezir I've edited your code below, but I can't seem to get the images to sit on top of one another.

 #main { position: relative; top: 0; right: 0; } #innerHover { position: absolute; top: 296px; left: 397px; width: 117px; height: 117px; border-radius: 50%; background: #fff; } #popupdiv { position:absolute; } #innerHover #popupdiv{ display:none; } #innerHover:hover #popupdiv{ position:absolute; display:block; } 

 <div><img id="main" src="Outcomes.png"> <span id="innerHover"> <a ref="web.com.au" alt=""><img id="popupdiv" src="callout.png"/></a> </span> </div> 

Answer 1

Please check this code sample:

  #myImage { position: relative; background: #0f0; width: 100px; height:100px; } #innerHover { position: absolute; top: 50%/**distance from top of image */; left:50% /**distance from left of image */; width:10px; /**region width*/; height:10px /**region height*/; overflow:show; background:#fff; } #popupdiv{ position:relative; left:10px; width:60px; height:60px; } #innerHover #popupdiv{ display:none; } #innerHover:hover #popupdiv{ display:block; } 

 <div id="myImage"> <div id="innerHover"><div id="popupdiv"><a target="_blank" href="https://www.rubyonrails.ba/"><img src="https://www.rubyonrails.ba/assets/logo-2f7bac89028bb6a84dcfb8f4c2f895e618937222a560620d00f9cdd2ee1c21e0.png"/> </a> </div></div> </div>