Blur Hover Effect
Smooth blur to clear transition on card hover
Code
.blur-card {
width: 300px;
height: 200px;
background: #fff;
border-radius: 12px;
padding: 24px;
box-shadow: 0 4px 12px rgba(0,0,0,0.1);
filter: blur(4px);
transition: all 0.4s ease;
opacity: 0.8;
}
.blur-card:hover {
filter: blur(0);
opacity: 1;
transform: scale(1.03);
box-shadow: 0 8px 24px rgba(0,0,0,0.15);
}HTML
<"attr-name"</span>>class</span>="tag"</span>>div</span> "attr-name"</span>>class</span>="blur-card"</span>>
<"attr-name"</span>>class</span>="tag"</span>>h3</span>>Blur Hover</"attr-name"</span>>class</span>="tag"</span>>h3</span>>
<"attr-name"</span>>class</span>="tag"</span>>p</span>>Hover to remove blur effect</"attr-name"</span>>class</span>="tag"</span>>p</span>>
</"attr-name"</span>>class</span>="tag"</span>>div</span>>