Elementor Fancy Social Media Hover Design
Get Premium

Elementor Fancy Social Media Hover Design

Element.How also offers premium tutorials! Check them here:

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.

<script> 
/* Please login to get the code 
 * The code will be for the Elementor Fancy Social Media Hover Design tutorial 
 * Found at this URL https://element.how/elementor-fancy-social-media-hover-design/ 
 */ 
</script>

Hope you enjoy!

Elementor Fancy Social Media Hover Design

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

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

And get exclusive Elementor related discounts here

Checkout the Elementor Addon Finder directly

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