Fahad is a talented web developer with a fantastic dimension of creativity and proactivity. He made the whole process very easy for me with excellent communication. I enjoyed the process and timely delivery. Thank you so much.
My goodness! Fahad!!! You're a magician. Oh my gosshh! I can't thank you more, Also thanks to Max for referring you! I'm super happy!
Subscribe To My YouTube Channel For More Upcoming Videos
/*Icon Hover Animation*/
.card{
--hover-color: #ff0057;
--height: 250px;
--transition-time: all 0.5s;
}
.card{
min-height: var(--height);
position: relative;
}
.card .card-icon-box img, .card .card-icon-box, .card .card-icon-box .elementor-heading-title{
transition: var(--transition-time);
}
.card .card-icon-box{
position: absolute;
top: 0;
left: 0;
right: 0;
height: var(--height);
width: 100%;
}
.card .elementor-widget-wrap:hover .card-icon-box{
left: -75px;
height: 150px;
width: 150px;
top: 50px;
}
.card .elementor-widget-wrap:hover .card-icon-box .elementor-widget-wrap{
background: var(--hover-color) !important;
}
.card .elementor-widget-wrap:hover .card-icon-box .elementor-heading-title{
font-size: 0px !important;
}
/*Icon Card Responsive*/
@media (max-width: 1025px) {
.card .card-icon-box{
position: relative;
left: 0;
height: 200px;
width: 100%;
top: auto;
}
.card .elementor-widget-wrap:hover .card-icon-box{
position: relative;
left: 0;
height: 200px;
width: 100%;
top: auto;
}
.card .elementor-widget-wrap:hover .card-icon-box i{
font-size: unset;
}
.card{
height: auto;
position: relative;
}
}
I only share these secrets with the people in this group. Honestly, you can not find such tricks for FREE on the whole internet!
