How to Position Icons Over Images or Videos Using CSS?-CSS Tutorial-php.cn

How to Position Icons Over Images or Videos Using CSS?

Linda Hamilton

Release： 2024-10-25 04:33:02

Original

862 people have browsed it

How to Position Icons Over Images or Videos Using CSS?

Positioning Icons Over Images or Videos

To place an icon over an image or video, creating a relative container around the image and setting the icon's position to absolute will suffice.

Code:

<code class="css">.container {
  position: relative;
}

.container img {
  display: block;
}

.container .fa-download {
  position: absolute;
  bottom: 0;
  left: 0;
}</code>

Copy after login

HTML:

<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>

Copy after login

Bootstrap 3 Compatibility:

This method is also compatible with Bootstrap 3. To add a button in the bottom left corner using the FontAwesome download icon, simply add the following code:

<code class="css">.container {
  position: relative;
}

.container img {
  display: block;
}

.container .btn-download {
  position: absolute;
  bottom: 0;
  left: 0;
  padding: 6px;
  background-color: #337ab7;
  color: #fff;
  border: none;
  border-radius: 3px;
}

.container .btn-download i {
  font-size: 1.5em;
}</code>

Copy after login

<code class="html"><link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<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" class="btn-download"><i class="fas fa-download"></i></a>
</div></code>

Copy after login

The above is the detailed content of How to Position Icons Over Images or Videos Using CSS?. For more information, please follow other related articles on the PHP Chinese website!