Home >Web Front-end >CSS Tutorial >How to Superimpose an Icon Over an Image or Video for Download Functionality?

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

Barbara Streisand
Barbara StreisandOriginal
2024-10-26 06:49:02466browse

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!

Statement:
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn