JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://code.jquery.com/jquery-latest.min.js"></script>
<div class="img-with-button">
  <img title="Кликни чтобы скачать" src="https://static01.nyt.com/images/2006/08/27/business/27knight_CA2.190.jpg">
  <a href="docs/docs2.pdf" target="_blank">Скачать PDF</a>
</div>
<div class="img-with-button">
  <img title="Кликни чтобы скачать" src="https://static01.nyt.com/images/2006/08/27/business/27knight_CA2.190.jpg">
  <a href="docs/docs1.pdf" target="_blank">Скачать PDF</a>
</div>

CSS

.img-with-button {
  position: relative;
  float: left;
}
.img-with-button a {
	opacity: 0;
  display: block;
	position: absolute;
	top: 220px;
  left: 15px;
	padding-top: 10px;
  padding-left: 30px;
	width: 130px;
	height: 30px;
	background: green;
	border-radius: 4px;
	cursor: pointer;
  transition: opacity 0.3s;
}
 .img-with-button:hover a {
	opacity: 1;
}