Jump to content

AnarHasanov

Member
  • Posts

    2
  • Joined

  • Last visited

AnarHasanov's Achievements

  1. 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>
  2. I need basically this: At the moment of pointing on image, it has to become blurry, and the text has to reveal itself. I've tried this CSS code, but it doesn't work as I thought it would be(( https://www.pro-mice.com/en/services /* Specific blocks to manage hover effects for image and text */ #block-32ca2bc5b2c3a9807b12, #block-166df93161e3f1672d31 { position: relative; overflow: hidden; } /* Initially hide text */ #block-yui_3_17_2_1_1714566757930_5473, #block-9fec95263a68dc9ba86a { opacity: 0; transition: opacity 0.5s ease; } /* Blur image on hover over image or text block */ #block-32ca2bc5b2c3a9807b12:hover img, #block-166df93161e3f1672d31:hover img, #block-yui_3_17_2_1_1714566757930_5473:hover ~ #block-32ca2bc5b2c3a9807b12 img, #block-9fec95263a68dc9ba86a:hover ~ #block-166df93161e3f1672d31 img { filter: blur(8px); } /* Show text when image or text block is hovered over */ #block-32ca2bc5b2c3a9807b12:hover #block-yui_3_17_2_1_1714566757930_5473, #block-166df93161e3f1672d31:hover #block-9fec95263a68dc9ba86a, #block-yui_3_17_2_1_1714566757930_5473:hover, #block-9fec95263a68dc9ba86a:hover { opacity: 1; }
×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.