Download Button on Image Mouseover

You could still start with the outside, always visible button setup. Visibility and positioning can be controlled by CSS, and CSS on mouse hover is easily changed with the :hover pseudo selector. onmouseover is a javascript event. Ever since CSS3 allowed :hover to apply to any DOM object, using javascript to achieve the same thing fell by the wayside.

Setup the button’s CSS so it is positioned how you like. You may need to use z-index to ensure it stays above the image. Once you are happy with the button’s appearance, add display: none; to the button’s CSS. Make a new button rule using the same selectors as before, this time with :hover appended. The style for hover will be display: block; or whatever causes it to display properly on hover.

Here’s an example CSS for a theoretical button that appears on hover. You’ll need to change nearly everything to match your actual application, but this at least illustrates the basic concept.

button.download {
  position: relative;
  top: -100px;
  z-index: 10;
  display: none;
}
button.download:hover {
  display: block;
}

<div class="img-container">
    <a href="#" class="button">My Button</a>
    <img src="my-image.jpg" />
</div>

.img-container {
    position: relative;
}
.img-container .button {
    position: absolute;
    top: 5px;
    left: 5px;
    z-index: 10;
}

Something like that should do the trick. Whats happening is, we set the button over the top of the image using absolute positioning which sits inside of a relative container. You may need to change the positioning of the button using top, right, bottom, left CSS attributes.

.img-container {
    position: relative;
}
.img-container .button {
    position: absolute;
    top: 5px;
    left: 5px;
    z-index: 10;
}

<div class="img-container">
    <a href="#" class="button">My Button</a>
    <img src="my-image.jpg" />
</div>