How to Create a Hover-Reveal Blurred Text Effect in Webflow

(function() {
  var style = document.createElement('style');
  style.textContent =
    '.blur-reveal { filter: blur(5px); transition: filter 0.4s ease; cursor: pointer; user-select: none; }' +
    '.blur-reveal:hover, .blur-reveal.revealed { filter: blur(0); }' +
    '.blur-reveal-hint { font-size: 11px; color: #9ca3af; display: block; margin-top: 4px; }' +
    '.blur-reveal.revealed .blur-reveal-hint { display: none; }';
  document.head.appendChild(style);

  document.querySelectorAll('[data-blur-reveal]').forEach(function(el) {
    el.classList.add('blur-reveal');
    var hint = document.createElement('span');
    hint.className = 'blur-reveal-hint';
    hint.textContent = '👆 Hover to reveal';
    el.parentNode.insertBefore(hint, el.nextSibling);

    el.addEventListener('click', function() {
      el.classList.add('revealed');
    });
  });
})();

.spoiler { filter: blur(6px); transition: filter 0.4s; cursor: pointer; }
.spoiler:hover { filter: blur(0); }