How To Make a Hover Card Like a PRO in Elementor

Facebook
Twitter
Reddit
WhatsApp

CSS

				
					selector .card-content{
    height: 56%;
    margin-bottom: -134px;
    transition: all 0.5s ease;
}

selector .card-wrapper:hover .card-content{
    margin-bottom: 0px;
    height: 100%;
}

selector .card-content .e-con-inner{
    transition: all 0.5s ease;
}

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

selector .card-wrapper:not(:hover) .card-content .e-con-inner {
    animation: fadeIn 1.5s ease forwards;
}


selector .card-wrapper:hover .card-content .e-con-inner {
    justify-content: end; 
}

@media(max-width:1024px){
   selector .card-content{
    height: 54%;
}
 
}

				
			
Subscribe
Notify of
0 Comments
Inline Feedbacks
View all comments

More to explorer

Elementor Button Border Gradient Tutorial

https://youtu.be/I9am2K_yopc Border Gradient Button CSS selector .elementor-button{ position: relative; overflow: hidden; z-index: 1; margin-bottom: -15px } selector .elementor-button:before{ content: ”; position: absolute;

0
Would love your thoughts, please comment.x
()
x

45 Minute Wordpress Support

Get your Wordpress questions answered and your Wordpress issues resolved.

Hello!

Enter your question below and a representative will get right back to you.

Speak to a team member
Leave us a review
Hi there, have a question? Text us here.