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>
