WordPress elementor responsive card hover effect

Preview

WordPress elementor responsive card hover effect on hover image slides to left in this video and shows the content

Features 
🔸Fully customizable 

🔸Fully Editable 

🔸Hover Effects

Tutorial link:

https://youtu.be/Ig_yaW8aR_E

☑️Support me on Patreon

https://www.patreon.com/developercrazy

🔸More WordPress Videos playlist 

🔸Unity Videos playlist 

🔸UI Template Downloadlink 

☑️Download link Click here

CSS code

<style>

 @media (min-width:320px) {

     .card:hover .card-image img{

         width: 400px;

    }

     .card .card-image img{

         width: 400px;

    }

     .card:hover .card-image{

         left: 15%;

    }

}

 @media (min-width:768px) {

     .card:hover .card-image img{

         width: 200px;

    }

     .card .card-image img{

         width: 200px;

    }

    /*Image Move on Hover*/

     .card:hover .card-image{

         left: 15%;

    }

}

/*Image Positioning CSS*/

 .card .card-image{

     position: absolute;

     bottom: -10px;

     left: 0%;

}

 .card .card-image, .card .card-image img{

     transition: 0.5s ease-in-out;

}

 

/*Hide Content Initially*/

 .card .card-content{

     opacity: 0;

     z-index: 1;

     transition: 1s ease-in-out;

}

/*Show Content on Hover*/

 .card:hover .card-content{

     opacity: 1;

}

 @media (min-width:1025px) {

     

    /*Image Move on Hover*/

 .card:hover .card-image{

         left: 40%;

    }

   

    /*Image Size On Hover*/

 .card:hover .card-image img{

         width: 400px;

    }

     .card .card-image img{

         width: 400px;

    }

}

 </style>