Sometimes life is a blur

We meditate so that we can see the miracles unfolding around us. Without stillness, life is a blur.  

-Russell Simmons 

Namaste – Welcome to another Divi tutorial! I had originally planned on doing a post about using Divi shortcodes, but had problems coming up with a decent short example. So, instead I’m posting a tutorial covering a question/comment I saw on one of the Facebook Divi groups. The poster asked if there was an easy way to have two images that are links where when you hover over one, the other goes blurry and some text pops up. The example that was given is here: http://www.abbeypynford.co.uk/.

Just to state up front, I’m still somewhat new to Divi and the experts out there might have a better quicker way to do this. Feel free to chime in! At first glance, you might think this problem can be solved with some simple custom CSS. Just apply a hover state and ‘Bob is your Uncle.’ The problem is, we want the opposite panel to blur. I decided the best way to accomplish this, as well as adding the appropriate text was to use some jQuery. While I could add this as a script into the Divi theme optimization, I’m electing to add this as a standalone script to my child theme.

You can download this script here. Let’s step through it. Throughout this code I’m using jQuery (instead of ‘$’) for clarity. First, we check that the document is fully loaded and then we set up our ‘listeners’. As you can guess from the name, these are jQuery commands that ‘listen’ for specific changes in the DOM. In this case, they are listening for a mouse hover over either the left or right panel, imaginatively named “#panel-left” and “#panel-right”, respectively. Following the hover listened are two functions. The first is for when you get a mouse enter to start the hover. The second is for the mouse out event. 

So, If you mouse over the left image the jQuery appends a div containing my text, “Design Services”, and positions it to be centered on top of the image. It also adds styling to the opposite panel to make it blurry. Out of habit I used the keyword ‘this” to refer to the panel being hovered over, but you can use the CSS selector instead. Once you have a mouse leave event both the styling and div event are removed. Note that this method will not function well on touch-screen devices. I will address implementing :hover on non-mouse devices in a later tutorial.

So we have three additional steps to get this working. First, on the Divi Builder side you need to add the CSS IDs to each of the images. Remember, you don’t add the preceding ‘#’ into the custom CSS boxes. Next, to get the words to center properly, I added some custom styling to each module and the overall section.
I gave the section a CSS ID of ‘panel-container’, and the modules ‘panel-left-container’ and panel-right-container’. Then I added these CSS rules into my style sheet.

Finally, we need to enqueue our script to get it all working. While you could load it using the Theme Options in Divi, I still prefer hardcoding it into the child theme. I saved my javascript file (‘hovering.js’) in a folder titled ‘js’ in my child folder. Then we just have to add a function and action to our child ‘functions.php’ file.

I’ve gone over this in a previous script, but if you are unclear on what exactly you need to do with this chunk of code, drop me a line! As always, I’m happy to clarify/customize anything I’ve posted here. Please subscribe if you found this helpful. I’ll be posting new tutorials 2-3 times a week as my schedule allows. I’ll send out a short update e-mail about once per month and will NEVER spam your inbox or sell your address. Any ideas/requests for new tutorials are welcome.