Wordpress Elementor Card hover template

on

 Card Hover

WordPress Elementor Card hover template on hover show title and description

Click the Youtube link to see a full preview
https://www.youtube.com/watch?v=9hKIkXucOJ0

🔸Features

  • Fully customizable 
  • Fully Editable 
  • Hover Effects

🔸Steps

  • Add column - Add Image - Add title & description
  • Select Image - Enter Class name (card)
  • Select Title and Description - Enter Class name (content-tex)
  • Add <html> code 

🔸Code

<style>
/* Mobile Devices */
@media (min-width:320px)  
{
.card{
    height: 250px;
    transition: all 0.4s ease-in-out !important;
}
.card:hover{
    height: 345px;
}
.content-text{
    margin-top: -90px; !important;
    transition: 0.23s ease-in-out;
    transition-delay: .2s;
}
.card:hover .content-text{
    margin-top: unset !important;
}
}
/* Tab Devices */
@media (min-width:768px)
{
    .card{
    height: 175px;
    transition: all 0.4s ease-in-out !important;
}
.card:hover{
    height: 275px;
}
.content-text{
    margin-top: -75px; !important;
    transition: 0.23s ease-in-out;
    transition-delay: .2s;
}
.card:hover .content-text{
    margin-top: unset !important;
}
}

/* Desktop Devices */
@media (min-width:1025px)
{
    .card{
    height: 220px;
    transition: all 0.4s ease-in-out !important;
}
.card:hover{
    height: 380px;
}
.content-text{
    margin-top: -75px; !important;
    transition: 0.23s ease-in-out;
    transition-delay: .2s;
}
.card:hover .content-text{
    margin-top: unset !important;
}
}
</style>


   

Comments

Post a Comment