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!
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 }