How to Superimpose an Icon on an Image or Video in the Bottom Left Corner?

How to Superimpose an Icon over an Image or Video

Introduction

In this question, we explore techniques to position an icon over an image or video, specifically in the bottom left corner. We'll examine two methods: using HTML and CSS, and utilizing Bootstrap 3 with Font Awesome.

Positioning an Icon with HTML and CSS

To position an icon over an image or video using HTML and CSS, follow these steps:

1. Create a relative container around the image or video.
2. Set the icon's position to absolute.
3. Position the icon using the bottom and left properties.

<code class="html"><div class="container">
   <img src="image.png" alt="Image">
   <a href="icon.png" download="new-filename">
      <i class="fas fa-download"></i>
   </a>
</div></code>

<code class="css">.container { position: relative; }
.container img { display: block; }
.container .fa-download { position: absolute; bottom:0; left:0; }</code>

Positioning an Icon with Bootstrap 3 and Font Awesome

To position an icon over an image or video using Bootstrap 3 and Font Awesome, follow these steps:

1. Include the Font Awesome CSS library.
2. Create a button in the desired position using the btn class and fa-download icon.

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

<button class="btn btn-primary fa fa-download" type="button"></button></code>

<code class="css">.container { position: relative; }
.container img { display: block; }
.container .btn { position: absolute; bottom:0; left:0; }</code>

Conclusion

By implementing these methods, you can effectively position and display icons over images or videos to provide additional functionality or visual cues.

The above is the detailed content of How to Superimpose an Icon on an Image or Video in the Bottom Left Corner?. For more information, please follow other related articles on the PHP Chinese website!