Hover like a butterfly….

…Sting like a pseudoclass!

So over on one of the Facebook Divi user pages someone asked about how to change one image for another upon hover in Divi. That sounded like a perfect opportunity for a tutorial! Without further ado, let’s learn about the :hover pseudoclass selector.

First up, what are pseudoclass selectors? They are a way that we can look at the state of a DOM element and add styling based on that state. There are a whole bunch of them, and another related set called pseudoclass elements, but we are going to focus on :hover. For the sake of simplicity, in the case of :hover, we tell the browser to “listen” for a mouse-over state on a particular element. If that state occurs we apply specific styling. Once we get a mouse-out event we re-apply the original styling. This allows us to do things like apply an overlay to an image upon hover, or even change the image entirely!

So, How do we accomplish this in Divi? Well, there is a quick and dirty way. This will work, but can bog your page load if you have a ton of them. Basically, you add a code module and enter the following code:

Open your media library and replace the [IMAGE XXX SOURCE] in each of the three places with the link that you can copy there.  

How do we do this if we have more than one set of these on a page? There are multiple ways to accomplish this using either straight CSS or javascript. For this tutorial, I’ll just address using CSS. I’ll save the fun stuff for another tutorial!

To implement this with straight CSS you really need to use images of the same size. Otherwise, you will get a shift in your page when you mouse over the image. You can force the image size by adding height and width parameters, but that has the potential for breaking your flow as you resize the page. Add an image module into your row containing your base image. Go into the custom CSS tab of that module and give it a CSS ID. Next, go into your style sheet (or the Divi theme options CSS box) and add the hover rule listed to the right. Change out the ‘CSS-ID’ for the ID you gave your image, and the [IMAGE SOURCE TWO] for the link copied from your media library for the second image. You can do this for as many images as you would like, just remember to give each one a unique CSS-ID.

Oh wow, you can switch a simple image, I’m impressed…not. What if I want a filter in addition? Glad you asked. Once you have your hover CSS rules set-up, you can do a lot of things. Want the picture to blur? Just add this in along with the rest of the CSS rules.

Want to have a fancy flip rather than just a replacement? Do you mean something like this? Pseudoclasses to the rescue again! In this case, we will apply the rule to the container itself. The first set of rules will set up the transition that we want – in this case, we will give the image a Y-axis rotation at the same time we change it. The second rule will define how quickly and what type of animation we want to use.

Again, you will have to insert your CSS ID in place of mine (‘monkey-one’) and the url with a link to your picture. With just a little bit of CSS ‘monkey-business’, you’ll find there is an amazing amount you can do with pseudoclasses. There is a plethora of other transformations out there to play around with on your pages. 

If anything in this tutorial is unclear, or you want something more specific for your design needs, drop me a comment!

Quick Important Update!!: I uploaded the wrong code above previously – you need the img tag selector in there.