Question   How do I make an image or icon with a rollover effect that shows a download icon on top of the image?

Answer    Below is code you can use to create the effect show above:

<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>

<style>
.download{position:relative;display:inline-block}
.download .overlay{display:none;width:100%;height:100%;background-color:rgba(0,0,0,.5);position:absolute;top:0;left:0;font-size:48pt;color:#FFF;text-align:center;text-shadow:2px 2px 2px #000}
.download .overlay i{line-height:250px}
.download:hover .overlay{display:block}
</style>

<a class="download" href="IMAGE-large.jpg">
 <img class="img-responsive" src="IMAGE-small.jpg" alt="">
 <div class="overlay">
  <i class="glyphicon glyphicon-download-alt"></i>
 </div>
</a>

The first 3 lines are jQuery and Bootstrap includes. If you already have them included you can remove it. Also, it is only needed for the download icon, so if you use a different icon or an image you don't need it.

In the line below change the 250px to be the height of the thumbnail:
.download .overlay i{line-height:250px}

The code below is for the icon. It can be swapped out with whatever you want (different icon, image, text, etc):
<i class="glyphicon glyphicon-download-alt"></i>

Replace "IMAGE-large.jpg" with the larger image that will be downloaded when clicked.

Replace "IMAGE-smaller.jpg" with the smaller image used for the thumbnail.