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:
And get exclusive Elementor related discounts here
Checkout the Elementor Addon Finder directly
Comments
4 Responses
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!!!
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.
Cheers Antonio, thanks for the kind words!
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 }