Elementor Fancy Social Media Hover Design

Elementor Fancy Social Media Hover Design

Just launched! Checkout the CSS Course for Elementor users.

Table of Contents

A great little design to add a bit of class to your website.

I teamed up with Imran for that one!

I took care of the coding, he took care of creating the edutaining video!

Check it out to learn how to use the code to fit your needs!

Elementor Hover Social Media Code

Copy paste this code under advanced > custom CSS.

selector li.elementor-icon-list-item.elementor-inline-item{
    padding:4px 10px;
    transition:width 0.4s, background-color 0.4s;
    /*border-radius: 6px;*/
    width:20px;
}
selector li.elementor-icon-list-item.elementor-inline-item span,selector li.elementor-icon-list-item.elementor-inline-item svg,selector li.elementor-icon-list-item.elementor-inline-item i{
    transition:color 0.4s, fill 0.4s;
}
selector li.elementor-icon-list-item.elementor-inline-item span.elementor-icon-list-text {
    transform:translateX(-100%);
    opacity:0;
    transition:transform 0.4s, opacity 0.4s;
    white-space: nowrap;
}
selector li.elementor-icon-list-item.elementor-inline-item:nth-child(1):hover{
    background-color:#0000FF;
    width:180px;
}
selector li.elementor-icon-list-item.elementor-inline-item:nth-child(2):hover{
    background-color:#FF5757;
    width:160px;
}
selector li.elementor-icon-list-item.elementor-inline-item:nth-child(3):hover{
    background-color:#000000;
    width:220px;
}
selector li.elementor-icon-list-item.elementor-inline-item:hover span, selector li.elementor-icon-list-item.elementor-inline-item:hover svg, selector li.elementor-icon-list-item.elementor-inline-item:hover i{
    color:#fff;
    fill: #fff;
}
selector li.elementor-icon-list-item.elementor-inline-item:hover span.elementor-icon-list-text {
    transform:translateX(0);
    opacity: 1;
}

Hope you enjoy!

Element.how also provides premium tutorials showing awesome advanced designs, check them out here.

Looking for something else? Search across 2445 Elements right here:

Checkout the Elementor Addon Finder directly

Comments

4 Responses

  1. I bring the idea, Maxime brings the uber-skill, and together we unleash!

    There are so many ways that you can make use of this, like soooooooooooooo many!!!

  2. Thank you Maxime. I found you through Imran's video. Imran is great, I want to see his channel blow up for Elementor related material. Just when you think you have found all you need for Elementor, I found Element.how I will be paying attention to your stuff. Have an awesome weekend! Thanks again.

  3. This CSS works for stacked iconlist items:

    Example:
    https://elementhow.glyphbox.be/13-elementor-fancy-social-media-hover-design/

    CSS:

    selector .elementor-icon-list-item:not(.elementor-inline-item) {
        transition:width 0.4s, background-color 0.4s;
        padding: 10px 15px 10px 15px;
        overflow:hidden;
        width: 50px;
    }
    
    selector .elementor-icon-list-item:not(.elementor-inline-item) span,
        selector li.elementor-icon-list-item:not(.elementor-inline-item) svg,
        selector li.elementor-icon-list-item:not(.elementor-inline-item) i{
        transition:color 0.4s, fill 0.4s;
    }
    
    selector .elementor-icon-list-item:not(.elementor-inline-item) span.elementor-icon-list-text {
        transform:translateX(-100%);
        opacity:0;
        transition:transform 0.4s, opacity 0.4s;
        white-space: nowrap;
        pointer-events: none;
    }
    
    
    selector .elementor-icon-list-item:not(.elementor-inline-item):hover{
        background-color:#000000;
        width:max-content
    }
    
    selector .elementor-icon-list-item:not(.elementor-inline-item):hover span, selector .elementor-icon-list-item:not(.elementor-inline-item):hover svg, selector .elementor-icon-list-item:not(.elementor-inline-item):hover i{
        color:#fff;
        fill: #fff;
    }
    
    selector li.elementor-icon-list-item:not(.elementor-inline-item):hover span.elementor-icon-list-text {
        transform:translateX(0);
        opacity: 1;
        pointer-events: all
    }
    
    

Leave a Reply

Just launched

CSS Course For Elementor Users

Offer incredible value to your clients by becoming a CSS ninja!