Description: Hover List > Show Overlay Color + Social Icons

Demo: https://section-demo.squarespace.com/team02?noredirect

Password: abc

#1. Edit each List Item > Add a paragraph with 4 text/url: Facebook, Instagram, Youtube, Tiktok

#2. Use this code to Code Injection – Footer (or Page Header Code Injection)

<style>
/* Icon Style */
p.social-parent a {
    font-size: 0;
    text-decoration: none !important;
}
p.social-parent a:before {
  font-family: "Font Awesome 6 Brands";
    color: #000;
    font-size: 20px;
  margin-left: 3px;
  margin-right: 3px;
}
/* Facebook */
li.list-item p a[href*="facebook"]:before {
    content: "\f09a";   
}
/* Instagram Icon */
li.list-item p a[href*="instagram"]:before {
    content: "\f16d";
}
/* Youtube */
li.list-item p a[href*="youtube"]:before {
    content: "\f167";
}
/* Tiktok */
li.list-item p a[href*="tiktok"]:before {
    content: "\e07b";
}
/* Messenger Icon */
li.list-item p a[href*="messenger"]:before {
    content: "\f39f";
}
  li.list-item p.social-parent {
    position: absolute;
    bottom: 0;
    margin: 0;
    padding-left: 10px;
    z-index: 999;
    opacity: 0 !important;
    transition: all 0.1s !important;
}
.list-item-media-inner:after {
    content: "";
    background-color: rgba(250, 162, 146, 0.85);
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 99;
    opacity: 0;
    transition: all 0.3s ease;
}
li.list-item:hover p.social-parent, li.list-item:hover .list-item-media-inner:after {
    opacity: 1 !important;
   transition: all 0.1s !important;
}
</style>
<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" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.0/jquery.min.js"></script>
<script>
$(document).ready(function(){
  $('p a[href*="facebook"]').closest('p').addClass('social-parent');
$('li.list-item').each(function() {
    var social = $(this).find('.social-parent');
    var listimg = $(this).find('.list-item-media-inner');
    $(social).appendTo(listimg)
});
});
</script>