card hover effects in Elementor | Elementor tutorial

In this quick tutorial I will show you how to create card hover effect using Elementor Pro. Here I have used all elementor features and some small CSS code. 

Add this CSS class name for box text which we want to keep hide on default state.

hide_content

CSS I used

CSS for Card hover effect

selector .hide_content{
 height: 0;
 opacity: 0;
 top:-110px;
 transition: .2s ease-in-out;
}
selector{
    height:200px;
    cursor:pointer;
    transition: .2s ease-in-out;
}
selector:hover {
    height: auto;
}
selector:hover .hide_content{
 height: auto;
 opacity: 1;
 top: 0;
}

CSS for responsive view

/*css for tablet*/
@media screen and (max-width: 768px) {
    selector{
    height:115px;
    }
}

/*css for phone*/
@media screen and (max-width: 360px) {
    selector{
    height:175px;
    }
}

Start Working with me for any wordpress project!

Get in touch

Have a few questions or just want to say hello? Use the form below to get in touch with me! If you are ready to book a new project please click here to fill out a design inquiry.

Call me by Skype (farjana.rashid55)

2 + 13 =

[wpforms id="2272"]