Elementor Fancy Social Media Hover Design

Elementor Fancy Social Media Hover Design

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!

Fancy an awesome full screen navigation?

Elementor premium full screen navigation templates
Comments

3 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.

Leave a Reply

Social Media

Recent Articles