-
Embossed character hover animation effect
HTML
CSS
JavaScript
<div class="container"> <h1 class="emboss-text">HOVER ME</h1> </div>
/* Container styling for centering */ body, html { height: 100%; margin: 0; display: flex; justify-content: center; align-items: center; background-color: #2b2b2b; /* Dark background enhances the emboss */ font-family: 'Segoe UI', system-ui, sans-serif; } .emboss-text { font-size: 6rem; font-weight: 900; color: #2b2b2b; /* Match background for true emboss effect */ margin: 0; cursor: default; display: flex; } /* Base style for each character */ .char { display: inline-block; /* Smooth, bouncy animation curve */ transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275), text-shadow 0.3s ease; /* The Emboss Effect: Light top-left, Dark bottom-right */ text-shadow: -1px -1px 2px rgba(255, 255, 255, 0.2), 1px 1px 2px rgba(0, 0, 0, 0.8), 2px 2px 4px rgba(0, 0, 0, 0.5); } /* Hover state for individual characters */ .char:hover { /* Zoom in and lift up slightly */ transform: scale(1.5) translateY(-5px); z-index: 10; position: relative; color: #333; /* Deepen the shadow to simulate height */ text-shadow: -2px -2px 4px rgba(255, 255, 255, 0.2), 3px 3px 6px rgba(0, 0, 0, 0.9), 8px 8px 15px rgba(0, 0, 0, 0.6); }
document.addEventListener("DOMContentLoaded", () => { const textElements = document.querySelectorAll('.emboss-text'); textElements.forEach(element => { const text = element.innerText; element.innerHTML = ''; // Clear the original text // Split text into characters and wrap each in a span text.split('').forEach(char => { const span = document.createElement('span'); span.className = 'char'; // Preserve spaces properly in HTML span.innerHTML = char === ' ' ? ' ' : char; element.appendChild(span); }); }); });
Live Preview
- Embossed character hover animation effect