![divi css hover effects divi css hover effects](https://www.peeayecreative.com/wp-content/uploads/2021/08/How-To-Add-A-Hover-Zoom-And-Rotate-Effect-To-The-Divi-Blog-Grid-Featured-Images-Tutorial-by-Pee-Aye-Creative.jpg)
We use this on the Testimonial Module and Blurb Module but using this same method, you will be able to do this in just about any other module as well. This hover effect will simply enlarge the module and give it a box shadow when you mouse over it.
![divi css hover effects divi css hover effects](https://www.learnhowwp.com/wp-content/uploads/2020/10/image-css-class-menu-module-menu-styles.jpg)
DIVI CSS HOVER EFFECTS HOW TO
et-fixed-header #top-menu li.In this Divi tutorial we are going to show you how to create a cool hover effect on your Divi Modules with a little custom CSS. As far as ease of editing the color is very easy to change, but if you plan to change the width of the border you’ll find you’ll need to play with the other numbers in the CSS as well.īox-shadow: 0 10px 0 0 #F15A29 !important /*** COLOR AND THICKNESS OF THE LINE ON HOVER ***/
DIVI CSS HOVER EFFECTS CODE
ImplementationĪdd the code below to your child theme’s stylesheet or to Divi’s custom css box under the Theme Options general tab. It’s important to match any type of small design detail like a hover effect to the overall feel of the site.
![divi css hover effects divi css hover effects](https://www.adfreak.de/wp-content/uploads/2019/11/SocialCenter.png)
Visually this is not as subtle as the first style, I think picking the right site to use it on would be key. I use this style myself on a Divi child theme I developed called Executive (I’ll link to the demo below so you can see the hover in action on a real site). It also places a chunky box over the active menu link. In this menu style we’ll be placing a large “blocky” line that animates down from the menu section beneath the menu item the mouse is hovering over. Style Two – Thick “boxy” look with line underneath webkit-transition-timing-function: ease-out Height: 3px /*** THICKNESS OF THE LINE ***/ ImplementationĪdd the following code to your child stylesheet OR to Divi theme options > general > custom CSS box:īackground: #15bf86 /*** COLOR OF THE LINE ***/ I think it’s subtlety is what makes it so versatile, it can be used on a real estate site as well as a musician’s site and everything in-between. It’s a pretty popular hover effect that I’ve seen on sites for years.
DIVI CSS HOVER EFFECTS PLUS
This is a really nice effect that can work well on pretty much any kind of site, plus editing the code for this style to change the color and line width is pretty easy for any level user. It will also set a static line directly beneath the active page link. In this menu style we’ll be adding a line that appears to grow from left to right directly beneath the menu item being hovered over. If you’ve just installed Divi you don’t need to configure this setting, it should be set to this automatically. Let’s get started! 3 Beautiful CSS Hover Effects You Can Add to Your Divi Menusįirst off, for all the styles we’re going to be using the default settings for header format. It’s not absolutely necessary, but it’s a nice bit of helpful UX. This is a common visual marker to include on websites to help remind the user where they are on the site. For instance, if the user is on the homepage, then the home link in the menu will have some sort of small design treatment applied. Not only will we be adding a nice hover effect but there will also be some style applied to the link of the active page. These will add just the right amount of “pop” to your Divi navigation. Hover effects should be subtle, we want visual interest but that’s not the most important part of the site, your content is. Your menu is one of the first things visitors see when they go to your website, so you want it to have some style right? Of course you do! That’s why in today’s post I’m going to share three ways to add some nice hover effects to your menu with custom CSS.