Home > Article > Web Front-end > 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!