0

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

Tobias Tengler
  • 6,848
  • 4
  • 20
  • 34
Onix
  • 3
  • 3
  • Possible duplicate of [How can I create download link in HTML?](https://stackoverflow.com/questions/2793751/how-can-i-create-download-link-in-html) – Fred Jul 14 '19 at 14:53
  • Possible duplicate of [How to show button on div mouse hover](https://stackoverflow.com/questions/20563803/how-to-show-button-on-div-mouse-hover) – Kate Orlova Jul 14 '19 at 15:19

1 Answers1

0

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>
Tobias Tengler
  • 6,848
  • 4
  • 20
  • 34
Thanooshan
  • 598
  • 12
  • 23