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;
}
}
0 Comments