Create Better Divi Headers

Mirror Hover Effect For Divi Dropdown Menu Items

by | Jan 31, 2018 | 2 comments

In this post I would like to show you how to implement a mirror-like hover effect for Divi dropdown menu items. This effect will work for desktop menu only(since hover effects do not make sense on mobile) and we are going to use CSS only.

Demo

Implementation

This effect requires the submenu items to be applied the overflow:hidden rule, so, we have to exclude the submenu parent items from being applied this effect since the lower level submenus will be hidden. We do this by using the :not() CSS pseudo-class.
#top-menu .sub-menu .menu-item:not(.menu-item-has-children) {
   overflow:hidden;
}
Next let’s create the thin line that will be crossing the submenu items on hovering over. We will use the :after pseudo-element for that. Since it needs to be show on hover only we will hide it by moving it to the left (left: -100%;).
#top-menu .sub-menu .menu-item:not(.menu-item-has-children):after {
   content: '';
   position:absolute;
   width:80%;
   border-bottom:1px solid rgba(255, 255, 255, 0.5); /* style the line here */
   bottom:50%;
   left:-100%;
   -webkit-transition-delay: all 0.5s;
   -o-transition-delay: all 0.5s;
   transition-delay: all 0.5s;
   -webkit-transition: all 0.5s;
   -o-transition: all 0.5s;
   transition: all 0.5s;
}
The following snippet will make the thin line move from left to right on hover and remain hidden again.
#top-menu .sub-menu .menu-item:not(.menu-item-has-children):hover:after {
   left:100%;
}
Now lets apply a text shadow to submenu items and use it as the “mirror reflection” of submenu items and define how it will behave on hover.
#top-menu .sub-menu .menu-item:not(.menu-item-has-children) a {
   text-shadow:0px -40px 0px rgba(255, 255, 255, 1); /* change mirrored link color here */
   -webkit-transition: all 0.75s;
   -o-transition: all 0.75s;
   transition: all 0.75s;
   -webkit-transform: translateY(100%) translateZ(0);
   transform: translateY(100%) translateZ(0);
   -webkit-transition-delay: all 0.25s;
   -o-transition-delay: all 0.25s;
   transition-delay: all 0.25s;
}
#top-menu .sub-menu .menu-item:not(.menu-item-has-children):hover a {
   text-shadow:0px -40px 0px rgba(255, 255, 255, 0);
   -webkit-transform:translateY(0%) translateZ(0) scale(1.1);
   transform:translateY(0%) translateZ(0) scale(1);
}

Bringing all of the CSS together

Now let’s bring all of the CSS above together.
/* Start Mirror hover effect for Divi dropdown menu */
#top-menu .sub-menu .menu-item:not(.menu-item-has-children) {
   overflow:hidden;
}
#top-menu .sub-menu .menu-item:not(.menu-item-has-children):after {
   content: '';
   position:absolute;
   width:80%;
   border-bottom:1px solid rgba(255, 255, 255, 0.5); /* style the line here */
   bottom:50%;
   left:-100%;
   -webkit-transition-delay: all 0.5s;
   -o-transition-delay: all 0.5s;
   transition-delay: all 0.5s;
   -webkit-transition: all 0.5s;
   -o-transition: all 0.5s;
   transition: all 0.5s;
}
#top-menu .sub-menu .menu-item:not(.menu-item-has-children):hover:after {
   left:100%;
}
#top-menu .sub-menu .menu-item:not(.menu-item-has-children) a {
   text-shadow:0px -40px 0px rgba(255, 255, 255, 1); /* change mirrored link color here */
   -webkit-transition: all 0.75s;
   -o-transition: all 0.75s;
   transition: all 0.75s;
   -webkit-transform: translateY(100%) translateZ(0);
   transform: translateY(100%) translateZ(0);
   -webkit-transition-delay: all 0.25s;
   -o-transition-delay: all 0.25s;
   transition-delay: all 0.25s;
}
#top-menu .sub-menu .menu-item:not(.menu-item-has-children):hover a {
   text-shadow:0px -40px 0px rgba(255, 255, 255, 0);
   -webkit-transform:translateY(0%) translateZ(0) scale(1.1);
   transform:translateY(0%) translateZ(0) scale(1);
}
/* End Mirror hover effect for Divi dropdown menu */
Add this CSS either into the Custom CSS field on Divi -> Theme Options page or into the Divi -> Theme Customizer -> Additional CSS field or add it to you child theme style.css file. Save it and enjoy the effect!
Hope you find this tutorial useful. Share it with your friends and feel free to leave your thoughts and suggestions in the comments section below and subscribe to stay updated ;)

Subscribe To Our Newsletter

Join our mailing list to download Divi freebies and get notified of our discounts, latest news and updates.

You have Successfully Subscribed! Please confirm your email address.

Divi MadMenu Coming Soon!

Join our mailing list to get notified when the Divi MadMenu module is released! Check out the sneak peek...

You have Successfully Subscribed! Please confirm your email address.

Get FREE Divi Layouts

Download 20+ Divi templates for FREE!

Please confirm your email address to complete your subscription. Thank you!

Black Friday Is Coming!

Subscribe to get notified when our BIGGEST SALE starts!

Please confirm your email address to complete your subscription. Thank you!

Cyber Monday Is Coming!

Subscribe to get notified when the SALE starts!

Please confirm your email address to complete your subscription. Thank you!

Black Friday Is Coming!

Subscribe to get notified when our BIGGEST SALE starts!

Please confirm your email address to complete your subscription. Thank you!