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
Close
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
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.
/*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;
}
No Additional HTML Required