[Share] Hover Text Block – Fade an Image

You can add a Text Block and an Image Block. Something like this.

Next, find ID of 2 Blocks.

In my example, it is:

• Text Block: #block-yui_3_17_2_1_1730253152365_10737
• Image Block: #block-yui_3_17_2_1_1732097629910_12028

Next, use this code to Code Injection > Footer

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$('#block-yui_3_17_2_1_1730253152365_10737').hover(
    function() {
        $('#block-yui_3_17_2_1_1732097629910_12028').fadeOut(500);
        $(this).css('transform', 'scale(1.05)');
    },
    function() {
        $('#block-yui_3_17_2_1_1732097629910_12028').fadeIn(500);
        $(this).css('transform', 'scale(1)');
    }
);
});
</script>

You can change ID here

If your plan doesn’t support Code Injection, you can use this code to Custom CSS box

body:has(div#block-yui_3_17_2_1_1730253152365_10737:hover) #block-yui_3_17_2_1_1732097629910_12028 {
    opacity: 0;
}