Need help with POP-UP textblock on blurred background image

On 5/4/2024 at 12:51 PM, tuanphan said:

Hi,

What should it look like? I see text already appears and image blurry

Yeap, everything works. Thanks to this code))

 

<script>
document.addEventListener("DOMContentLoaded", function() {
    function setupInteractions() {
        if (window.innerWidth <= 1024) {
            return; // Do not run the script on small screens
        }

        // Define elements based on IDs
        var imageBlockLeft = document.getElementById('block-32ca2bc5b2c3a9807b12');
        var textBlockLeft = document.getElementById('block-yui_3_17_2_1_1714566757930_5473');
        var imageBlockRight = document.getElementById('block-166df93161e3f1672d31');
        var textBlockRight = document.getElementById('block-9fec95263a68dc9ba86a');

        function handleMouseEnterImageBlock() {
            this.textBlock.style.opacity = 1;
            this.querySelector('img').style.filter = 'blur(8px)';
        }

        function handleMouseLeaveImageBlock() {
            this.textBlock.style.opacity = 0;
            this.querySelector('img').style.filter = '';
        }

        [imageBlockLeft, imageBlockRight].forEach(function(block, index) {
            var textBlock = (index === 0) ? textBlockLeft : textBlockRight;
            if (block && textBlock) {
                block.textBlock = textBlock;
                block.addEventListener('mouseenter', handleMouseEnterImageBlock);
                block.addEventListener('mouseleave', handleMouseLeaveImageBlock);
                textBlock.addEventListener('mouseenter', handleMouseEnterImageBlock.bind(block));
                textBlock.addEventListener('mouseleave', handleMouseLeaveImageBlock.bind(block));
            }
        });
    }

    setupInteractions();
    window.addEventListener('resize', setupInteractions);
});

</script>