Next Level Product Card Hover Effect Animation | Elementor Tips & Tricks

[@thecreativarena]

Copy and paste the code below
.card{
transition: 0.5s;
transition-delay: 0.5s;
cursor: pointer;
}
.card .circle{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border-radius: 20px;
}
.card .circle::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
border-radius: 50%;
background: transparent;
border: 8px solid #f40009;
filter: drop-shadow(0 0 10px #f40009) drop-shadow(0 0 60px #f40009);
transition: 0.5s, background 0.5s;
transition-delay: 0.75s, 1s;
}
.card:hover .circle::before {
transition-delay: 0.5s;
width: 100%;
height: 100%;
border-radius: 20px;
background: #f40009;
}
.card .circle .logo {
position: relative;
width: 300px;
transition: 0.5s;
transition-delay: 0.5s;
}
.card:hover .circle .logo{
transform: scale(0);
transition-delay: 0;
}
.card .product {
position: absolute;
top: 50%;
left: 50%;
height: 300px;
transform: translate(-50%, -50%) scale(0) rotate(260deg);
transition: 0.5s ease-in-out;
}
.card:hover .product {
transition-delay: 0.75s;
top: 70%;
left: 70%;
height: 350px;
transform: translate(-100%, 45%) scale(3.5) rotate(20deg);
transition: 0.5s ease-in-out;
}
.card .content {
position: absolute;
width: 55%;
left: 20%;
padding: 20px;
opacity: 0;
transition: 0.5s;
visibility: hidden;
}
.card:hover .content{
transition-delay: 0.75s;
opacity: 1;
visibility: visible;
left: 20px;
}

[@DMLeBeau]

I love this video. I noticed for the images to work properly they need to be resized to 500x500 and 400x400. Anything bigger than that does not show well. I also noticed that the text is covered a little when the hover image takes effect, so we might add a z index on the content widget to have the text above the hover image. Lastly, I noticed it is not mobile-responsive, I love it

[@axiom7206]

Amazing video again. Thank you very much for your work. Unfortunately, I can't find the CSS code in the comments section of the video.

[@thecreativarena]

it has been added

[@axiom7206]

@@thecreativarena Thank you very much. 🙂

[@papayawebmedia]

Great effect but its not reponsive.

[@danielodiba4148]

It works fine on tablet also but what’s the point of getting it to work on mobile when there is no hover on mobile