33

How do I position an icon over an image or video? I want it to be on the bottom left corner of the image. When the user clicks on the download icon, a prompt appears asking if they would like to download the image.

Like so:

enter image description here

Relevant code

<!-- font awesome CSS -->
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.1/css/all.css" integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr" crossorigin="anonymous">

<!-- download icon -->
<a href="https://loremflickr.com/320/240/dog" download="new-filename"><i class="fas fa-download"></i></a>

<!-- image of dog -->
<img src="https://loremflickr.com/320/240/dog" alt="dog">

Does this method also work with bootstrap 3 font-awesome? I might want to add a button like this on the bottom left corner:

enter image description here

I am using the FontAwesome download icon.

Bootstrap awesome font: https://fontawesome.com/v4.7.0/examples/

4 Answers 4

75

You need a relative container around your image and then you set your icon to be position: absolute.

.container { position: relative; }
.container img { display: block; }
.container .fa-download { position: absolute; bottom:0; left:0; }
<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>

The reason why you need you img to be display: block is because, by default, img's are display: inline and your img will have a space between the bottom of it and the bottom of the container - so your download icon will appear slightly below your img. Setting it to display: block stops this.

11

To overlay two elements, one approach is to make a parent position: relative, and then the overlay position: absolute.

In this case, this example should work, where the download icon can be any element, such as a bootstrap button.

.img-download {
  position: relative;
}

.img-download > a {
  position: absolute;
  background: white;
  bottom: 0;
  left: 0;
}
<!-- font awesome CSS -->
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.1/css/all.css" integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr" crossorigin="anonymous">

<div class="img-download">
  <!-- image of dog -->
  <img src="https://loremflickr.com/320/240/dog" width="320" height="240" alt="dog">
  
  <!-- download icon -->
  <a href="https://loremflickr.com/320/240/dog" download="dog.jpg"><i class="fas fa-download"></i> Download</a>
</div>

4

Let me add a variant, when you need to position the icon on right corner of unknown-width img, it doesn't work with previous response. Should introduce a wrapper as below:

.wrapper { display: flex; justify-content: center;}    
.content { position: relative; width: max-content}
.content img { display: block; }
.content .fa-download { position: absolute; bottom:10px; right:10px; }
<link href="https://use.fontawesome.com/releases/v5.7.1/css/all.css" rel="stylesheet"/>

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

1

I think you can solve this using the z-index property. Try this:

<img style="z-index: 1;" src="dog.png" alt="dog">

<a style="z-index:2" href="dog.png" download="new-filename"><i class="fas fa-download"></i></a>

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.