Elementor Icon Box Hover Effects | Elementor Pro Tutorial

Quick Summary

In this tutorial, I'll show you How to create Icon Card Hover Effect using Elementor Page Builder 🔥🔥No additional plugin is required!! 🔥

In this tutorial, I've shown how to play with icon boxes. I've not used Elementor default icon box. Basically, I've taken two inner sections and overlapped them on top of each other.

Intially we can only see the icon with the big heading. But, when we hover on that, we can the details of the box including heading, paragraph and button.

I have added smooth animation. So over it's really eye soothing. You can use it on several places, speially on the Services section of your website! 🙂

8 Million+ website owners started using the Elementor page builder. I'll show you the easiest way how you can create your personal resume website using Elementor Page Builder yourself.

If you're searching for how to make an eCommerce website, how to make a professional webShop from scratch, how to create an Online Store website step by step using woocommerce elementor, woocommerce subscriptions, WordPress eCommerce 2020 tutorial for beginners, woocommerce plugins, woocommerce payment gateway, best website making course, Elementor tutorial for beginners – then this tutorial is for you.

And, lastly, If you want me to build your AWESOME website at an affordable price,

Tools and Links Used

Bluehost WordPress hosting with a free domain included.

Get Hosting

Elementor The free page builder this tutorial is built with.

Get Elementor

Elementor Pro The Pro upgrade used throughout this tutorial.

Get Elementor Pro

HeyWordPress WordPress themes and ready made templates.

Get Templates

Prompt Used in This Tutorial

Icon Card Hover Effect

/*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

/*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;
}
}

Elementor Icon Box Hover Effects | Elementor Pro Tutorial

Quick Summary

Tools and Links Used

Prompt Used in This Tutorial

Get Your FREE Freelancing Roadmap

Related Tutorials

Vibe Code a REAL Animated WordPress Website with Claude + Elementor

Vibe Coding Full Course for Beginners – Build & Launch a Real SaaS

Edit Videos with ChatGPT Codex — Raw Clips to Finished Reel