[Solved] Hover over image to get a box with multiple links in html/JavaScript

by


Here is the html:

<div id="container">
  <img id="image"/>
  <div id="overlay">
    <a href="www.site1.com">Link 1</a><br>
    <a href="www.site2.com">Link 2</a><br>
    <a href="www.site3.com">Link 3</a><br>
  </div>
</div>

Here is the css:

#container {
  position:relative;
  width:100px;
  height:100px;
}
#image {
  position:absolute;
  width:100%;
  height: 100%;
  background:black;//should be url of your image
}
#overlay {
  position:absolute;
  width:100%;
  height:100%;
  background:gray;
  opacity:0;
}
#overlay:hover {
  opacity:1;
}

JsFiddle link

solved Hover over image to get a box with multiple links in html/JavaScript