如何使用按钮以HTML格式下载图像

Question

I have a gallery in my PHP&HTML web page and I want to click on a button and then download the image posted as background of a div. A div here is corresponding to an image and it is included in the main div. The download button shows after hovering over the div with the image as background

The code is this, including my trials:

<div class="row">
  <div class="col-md-4 col-sm-4 text-center animate-box">
    <div
      class="work-grid"
      id="logosera"
      style="background-image: url(images/logo-biocentru.png);"
    >
      <img id="logosera" src="images/logo-biocentru.png" style="display:none" />
      <div class="desc">
        <h3><a href="#">Carti vizita</a></h3>
        <span class="cat">Graphic Design</span>
        <p>
          <span class="download">
            <a href="#logosera" download="biocentru.png">
              <i class="icon-download"></i>
            </a>
          </span>
          <span class="love">
            <a href="#"><i class="icon-heart"></i></a>
          </span>
        </p>
      </div>
    </div>
  </div>
</div>

It looks like this:

image before hover

image after hover

Answer 1

Place the image file path in the href tag:

<span class="download">
    <a href="biocentru.png" download="biocentru.png">
        <i class="icon-download"></i>
    </a>
</span>