Blur effect explanation
.glass-box { background: rgba(0, 0, 0, 0.6); /* bg-black/60 */ backdrop-filter: blur(12px); /* Glass blur effect */ -webkit-backdrop-filter: blur(12px); box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25); /* shadow-2xl */ padding: 2rem; /* p-8 */ border-radius: 1rem; /* optional: smooth corners */ }
container background image hover background image zoom css code
/* Main Card */ selector { position: relative; overflow: hidden; cursor: pointer; /* Normal state = slight zoom-out look */ background-size: 102% 102% !important; background-position: center center !important; transition: background-size .45s cubic-bezier(.25,.46,.45,.94); } /* Hover = smart smooth zoom-in */ selector:hover, selector:active { background-size: 115% 115% !important; } /* Play Icon hidden initially */ selector […]