How to Position an Icon Over an Image or Video and Trigger a Download on Click?

Positioning an Icon Over an Image or Video

Problem:
You need to position an icon over an image or video, aligning it to the bottom left corner. When clicked, the icon should trigger a download prompt for the image.

Solution:
To achieve the desired positioning, you need to create a relative container around the image. Then, set the icon's position to absolute. Here's a code example:

<code class="css">.container {
  position: relative;
}

.container img {
  display: block;
}

.container .fa-download {
  position: absolute;
  bottom: 0;
  left: 0;
}</code>

<code class="html"><link href="https://use.fontawesome.com/releases/v5.7.1/css/all.css" rel="stylesheet" />

<div class="container">
  <img src="https://placekitten.com/300/300" />
  <a href="dog.png" download="new-filename"><i class="fas fa-download"></i></a>
</div></code>

Bootstrap 3 Font-Awesome:
Yes, the same method works for Bootstrap 3 Font-Awesome. Replace the Font Awesome version in the code above with the following:

<code class="html"><link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" /></code>

<code class="html"><div class="container">
  <img src="https://placekitten.com/300/300" />
  <a href="dog.png" download="new-filename"><i class="fa fa-download"></i></a>
</div></code>

The above is the detailed content of How to Position an Icon Over an Image or Video and Trigger a Download on Click?. For more information, please follow other related articles on the PHP Chinese website!