How to Superimpose an Icon Over an Image or Video for Download Functionality?

Positioning an Icon Over an Image or Video

This tutorial addresses the issue of superimposing an icon over an image or video. The icon should reside in the bottom left corner. Upon user interaction with the icon, a prompt should appear offering the option to download the image.

Steps Involved

To achieve this effect, employ a relative container encompass the image. Subsequently, position the icon with "position: absolute", aligning it at the bottom and left edges.

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>

Additional Considerations

For compatibility with Bootstrap 3's font-awesome, use the following technique:

<code class="html"><div class="btn btn-primary btn-lg">
    <i class="glyphicon glyphicon-download"></i> Download
</div></code>

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