How can I position an icon over an image or video?

by

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="https://stackoverflow.com/questions/54508374/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.

More Related Contents:

  1. Blank Space To Right Of Webpage? (Hidden min-width?) [closed]
  2. div 100% width with other div fixed
  3. How to design an HTML/CSS signature that will work in Outlook 2016? [duplicate]
  4. Trying to work on responsiveness of login form
  5. One flex/grid item sets the size limit for siblings
  6. CSS: Width in percentage and Borders
  7. Can ordered list produce result that looks like 1.1, 1.2, 1.3 (instead of just 1, 2, 3, …) with css?
  8. How do I get this CSS text-decoration override to work?
  9. Why does position:relative; appear to change the z-index?
  10. Align an element to bottom with flexbox
  11. Does opacity:0 have exactly the same effect as visibility:hidden
  12. Flexbox and Internet Explorer 11 (display:flex in ?)
  13. Is it possible to style a mouseover on an image map using CSS?
  14. Floating an image to the bottom right with text wrapping around
  15. HTML: Changing colors of specific words in a string of text
  16. Changing highlight color
  17. Why doesn’t “display: block” & “width: auto” stretch a button to fill the container? [duplicate]
  18. How to change content on hover
  19. How can I style a file input field in Firefox?
  20. Prevent a child element from overflowing its parent in flexbox [duplicate]
  21. Why do s clear floats?
  22. Why isn’t position:sticky with left:0 working inside a scrollable container?
  23. Why does `transform` break `position: fixed`?
  24. Why do Firefox and Opera ignore max-width inside of display: table-cell?
  25. How to get ScrollBars in SVG?
  26. Why doesn’t width/height work with non positioned pseudo elements?
  27. CSS way to horizontally align table
  28. Change css font-family for separate options in select tag
  29. BEM block, naming & nesting
  30. Alignment of content vertically in adjacent flexbox containers

Leave a Comment