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>
advert
CSS CLASSES : Copy and paste to use them:
- Card class CSS ————-: card
- Title class CSS————–: card-content
- Card Content Class CSS—-: card-content
- Image class CSS————: card-image
Use the tutorial attached for more info on how to make it happen and apply the code the easy way.
You may also want to learn how to add unlimited custom order status to your ecommerce website
