Description
+ Initial: show Title/icon/overlay color
+ Hover: show description, border only
#1. First, find Button Block ID
#2. Next, use this code to Custom CSS
div.button-block img {
width: 40px;
margin-bottom: 10px;
}
div.button-block:has(img) {
a {
flex-direction: column !important;
background-color: #fa666c !important;
border-color: transparent !important;
color: #fff !important;
}
p {
display: none;
font-size: 14px;
position: absolute;
top: 50%;
transform: translateY(-50%);
margin: 0 !important;
padding-left: 10px;
padding-right: 10px;
}
a:hover {
img {
display: none;
}
& {
font-size: 0 !important;
}
p {
color: #518c9a !important;
display: block;
}
& {
background-color: transparent !important;
border: 2px solid #fa666c !important;
}
}}
#3. Use this code to Code Injection > Footer (or Page Header Injection)
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
// our respnosible technology
$('<img src="https://static1.squarespace.com/static/681651e7c6cec008b3d7859f/t/68bf780bf5eb202090bac309/1757378571329/sample-icon.png"/>').prependTo('#block-yui_3_17_2_1_1754852320298_26982 a');
$('<p>Locally developed mobile health tools that are tailored to Guinea’s disease burden, workflows, and language</p>').appendTo('#block-yui_3_17_2_1_1754852320298_26982 a');
// Enabling training
$('<img src="https://static1.squarespace.com/static/681651e7c6cec008b3d7859f/t/68bf780bf5eb202090bac309/1757378571329/sample-icon.png"/>').prependTo('div#block-3e0eea09868dc7f70eb3 a');
$('<p>Locally developed mobile health tools that are tailored to Guinea’s disease burden, workflows, and language</p>').appendTo('div#block-3e0eea09868dc7f70eb3 a');
// Local empowerment
$('<img src="https://static1.squarespace.com/static/681651e7c6cec008b3d7859f/t/68bf780bf5eb202090bac309/1757378571329/sample-icon.png"/>').prependTo('div#block-dc3c6954e952b784b186 a');
$('<p>Locally developed mobile health tools that are tailored to Guinea’s disease burden, workflows, and language</p>').appendTo('div#block-dc3c6954e952b784b186 a');
});
</script>
#4. Update Image Icon URL + Button Block ID + Description text here
You can change Image icon size here.
Change button background, text color here
Change description text size here
Change description text color, background, border here
