Social Icons over Reel Images

To add Social Icons over Reel Images, like this

#1. Use this code to Page Header Injection (If your site doesn’t support Injection, you can add it via Code Block)

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css" integrity="sha512-KfkfwYDsLkIlwQp6LFnl8zNdLGxu9YAA1QvwINks4PhcElQSvqcyVLLD9aMhXd13uQjoXtEKNosOWaZqXgel0g==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<style>
  figure {position: relative;}
figcaption.gallery-caption.gallery-caption-reel {
    opacity: 1 !important;
    visibility: visible !important;
    position:absolute;
       bottom: 20px;
    right: 20px;
    left: unset !important;
    top: unset !important;
    margin: 0 !important;
    height: auto !important;
}
  figcaption.gallery-caption.gallery-caption-reel {
    text-align: right;
    color: #fff;
    max-width: 100% !important;
}
figcaption.gallery-caption.gallery-caption-reel * {
    color: #fff;
    font-size: 30px;
}
figcaption.gallery-caption.gallery-caption-reel p {
    display: flex;
    flex-direction: column;
}
</style>

#2. Hover Reel > Click EDIT SECTION

#3. Enable Captions

#4. Hover Reel > Click EDIT GALLERY

#5. Use this syntax into Description Field

<a href="http://m.me/tuanphan">
  <i class="fab fa-facebook-messenger"></i>
  </a>
 <a href="https://wa.me/0123456789">
  <i class="fab fa-whatsapp"></i>
  </a>
 <a href="[email protected]">
  <i class="fas fa-at"></i>
  </a>

#6. Explain
Each icon syntax will include 2 parts

• Icon tag:

<i class="fab fa-facebook-messenger"></i>

You can find icon syntax at: https://fontawesome.com/search?o=r&m=free
Just click on each free icon > Copy this

• Link tag:

<a href="enter url here">icon tag</a>.

For example:

<a href="https://wa.me/0123456789">
  <i class="fab fa-whatsapp"></i>
  </a>

#7. To make icons appear on hover only, use this new code

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css" integrity="sha512-KfkfwYDsLkIlwQp6LFnl8zNdLGxu9YAA1QvwINks4PhcElQSvqcyVLLD9aMhXd13uQjoXtEKNosOWaZqXgel0g==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<style>
  figure {position: relative;}
figcaption.gallery-caption.gallery-caption-reel {
    opacity: 0 !important;
    visibility: visible !important;
    position:absolute;
       bottom: 20px;
    right: 20px;
    left: unset !important;
    top: unset !important;
    margin: 0 !important;
    height: auto !important;
}
    figure:hover figcaption.gallery-caption.gallery-caption-reel {opacity: 1 !important;}
  figcaption.gallery-caption.gallery-caption-reel {
    text-align: right;
    color: #fff;
    max-width: 100% !important;
}
figcaption.gallery-caption.gallery-caption-reel * {
    color: #fff;
    font-size: 30px;
}
figcaption.gallery-caption.gallery-caption-reel p {
    display: flex;
    flex-direction: column;
}
</style>

#8. To change icon size/color, change these

#9. To adjust space between icons – right/bottom of reel image, you can adjust this