Creating Hover Effects With Divi

To people who do not have much experience in CSS, adding any sort of effect to your website may seem too complicated to do yourself. Fortunately there is an easy solution to this problem. Divi is a great WordPress theme made by Elegant Themes, and is the go-to theme for New Eve. We find that it is not only easy for an experienced web developer to use and customize, but our clients find it easy to take over and maintain when the project is done. Divi makes it so even a complete novice can create a beautiful website with a bit of practice.

A hover effect is when you drag your cursor above a section of a webpage and it changes in someway, and when the cursor is removed the section goes back to its original form. A hover effect can be anything; a color change, a shadow or glow effect, a zoom effect on an image, and anything in between. Doing something like this on your own may seem intimidating, especially if you look up the CSS that would be needed to add a simple color change to an image. Divi makes it so you do not have to worry about complicated CSS, and in a few easy steps you can have a beautiful hover effect created. For this tutorial we will be showing you how to place a color changing effect on an image, while at the same time adding a box shadow and slightly moving the image to make it pop.

To start out place picture in your image module. Head over to the design tab and click the section labeled “Filters”. You will see many different effects you can add to your image here, but for this tutorial we are only going to focus on the saturation. Hovering over any of the filter types will bring up 5 buttons for you to press: a question mark, a smart phone, a cursor, a refresher, and a menu button; you will need to click the cursor. When you have chosen the cursor, the hover effect options will appear, one showing “Desktop”, the other “Hover”. For this example we want our image to begin in grayscale and quickly change to full color when hovered over, so under “Desktop” bring the saturation down to 0, or 50% for a dulled color effect. Under “Hover” raise the sauration again up to 100% to get the original color scale of your image.

 

 

Next we will add our box shadow to the effect; under the same design tab head up to option about “Filters” labeled “Box Shadow”. Choose the desired box shadow you would like to have for your image (we will be choosing the 2nd option) and scroll down to your options. You will see several different options you can choose from here, but to make our shadow seem to appear from nowhere when hovered over, we are going to to go down to “Shadow Color”. Hover over “Shadow Color” and the option for a hover effect will appear again. Under “Desktop” this time we are going to be removing the box shadow by bringing the opacity all the way down until your color shows as “rgba(0,0,0)”. Under “Hover” we will raise the opacity again until we have reached a color that we like for our shadow.

 

 

For the final effect we will be moving the image slightly up when hovered over. Again, under the design tab, we will scroll down to “Transform”. Choose the hover effect option once more, and then select “Transform Translate”. Under “Desktop” keep the option at 0px, and under “Hover” bring the pixels down to -5px, so when the image is hovered over it begins 5 pixels above where it originally started.

 

 

And there you have it! Publish or preview your page and you will see that you have created a simple, yet beautiful hover effect on your own. Divi makes it so simple to add these effects, and many many more on anything from text and images, to entire sections of your webpage. To get the fancier effects you many need to do a bit of CSS customization, which is not nearly as scary as it seems, but Divi has a solution for nearly any idea you may have.