loader image

Blur Zoom Hover Effect

Blur Zoom Hover Effect

A Blur Zoom Hover Effect for block panels and images. This effect can be added to any column layout or panel where hover content zooms in with BG Colour change, while non selected content zooms out and blurs into the background

4.5/5 - (2 votes)

Template Example

Card One

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.

Card Two

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.

Card Three

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.

CREDIT Jim Fahad
CSS NEEDED

/*Blur Zoom Hover Effect*/
selector{
--zoom-in: 1.2;
--zoom-out: 0.9;
--hover-background: #8A00D4;
}
selector{
transition: all .5;
}
selector:hover .card-box{
filter: blur(5px);
transform: scale(var(--zoom-out));
}
.card-box{
transform: scale(1);
transition: all .5s;
}
.card-box:hover{
transform: scale(var(--zoom-in)) !important;
z-index: 2;
filter: blur(0px) !important;
}
selector .elementor-widget-wrap{
transition: all .5s;
}
selector .card-box:hover .elementor-widget-wrap{
background: var(--hover-background) !important;
}

HTML NEEDED

No Additional HTML Required

robedge.com | mt irvine tobago w.i. | 868.276.2665 | robedge@gmail.com