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>

try to search with google for 'javascript' , you should be able to find a script / way. I think there was an event like 'onhover' which can be triggered to do your action — , Sep 26 '18 at 07:24

score 0 · Accepted Answer · answered Sep 26 '18 at 07:39

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>

Clickable image appear on hover

1 Answers1