Elementor tricks- responsive card hover effect ( Hover on image it shows text )

advert

Elementor tricks on how to make an invisible text box appear when you hover over Image. This is a very easy tutorial that will allow you to create this effect in minutes. In these tutorial we are going to learn how to add Elementor card on hover it reveals text. We are going to use Elementor pro + CSS for us to achieve it.

CSS to use, copy paste the 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>