Create a hover effect for your Divi columns that can show several modules on hover. Originally, I created this feature for a larger church client who had 3 different locations.
00:00:01 hey y’all what’s up hope you’re doing well it’s John with BeSuperfly in this tutorial I wanted to show how on this website this church had several locations with different service times and they wanted it on Hover to show the times and other information and so I just made this kind of deal for them and so we got a title we got another text block here and a button and then the whole thing can be a link and so I’m going to show you how to make this yourself and then on tablet and mobile since there’s no hover I just
00:00:36 show the just show the pieces all right so let’s let’s Dive In that’s what we’re going for okay so here’s my here’s where I’m at right now this is kind of my setup and so what I have is a I have a I have a section that I’ve given the ID of locations and you’ll get the CSS in the in a code pen for this and then excuse me in my row my rows called locations row a class and then back on my column I’m just doing one column here but you would do you know if you had one two of these side by side you do both columns
00:01:24 but in my column CSS I have location and then inside here inside my column all I I just have let me look at the padding real quick here ‘s my spacing and this is just for desktop and you can make edits for for tablet and mobile as you want but I’m just doing just just kind of spacing it out so it looks nice yeah in fact that might have been probably could have done a little less there but this these ones aren’t really going to matter here this top one will but these ones probably really won’t hear in a little
00:02:02 bit but that’s the setup so let me go ahead and save that and so yeah right now nothing’s happening it’s just a typical typical deal Okay so let’s go ahead and pull up the CSS here so the first thing that this this first block does is it basically says hey go into the locations section the locations Row the location column and then using the before pseudo class add this background color so I’ll just kind of paste these in a little bit at a time so you can see what’s up and I’m just going to paste it on the page CSS
00:02:47 normally I wouldn’t I wouldn’t do this and let me let me grab that top title team as well okay so you can see all that’s doing is just adding this nice color overlay over the over the image here and the reason why I didn’t use I mean obviously I could have gone in and I could have this out real quick obviously I could have gone in to the column myself and added you know I could have gone in here into the background and I I could have added you know a gradient over it and then and then done it this way but the reason why the
00:03:29 reason why I don’t is because I’m going to animate this color and when you use a background gradient the browsers treat it as a background image and so your animation isn’t smooth it’s it’s really it becomes really harsh I’ll show you an example let’s just say we let’s say we have different colors here so when I go back and forth here it’s gonna it’s gonna it’s not gonna do it smooth now some browsers are working on it to where it’s going to be smooth and chrome might be one of those but I’m pretty sure in
00:04:14 Firefox still doesn’t smoothly do it so you can see there just it just does it there’s no smoothness to it even if you add you know smooth animation it’s not it’s not smooth so that’s why I’m not using this this background gradient trick for this let me go ahead and get rid of that and get rid of this one okay so going back to our so yeah that’s what that’s doing that’s adding that nice deal right there and then here’s my hover for that so I’m saying hey when you hover when you hover on that location column
00:05:00 change the background from this all black 33 to this red color and so now you see when I hover over it it’s 95 percent of the red color which is what I want okay and then now we’re going to get into some of the other things so basically just I zeroed out the padding on my H3 here inside my yeah let me let me go ahead and show you the show that breakdown so let me go ahead and refresh this actually that’s fine yeah let me go ahead and save this and refresh it okay here we are right now cool this section title this would be like
00:05:56 the location name class I gave this module and then this module here I’ve set it I’ve set the the sizing to be 67 percent I didn’t like how full looked so I did 67 percent that’s up to you though but I gave it a class of location text so we have location name location text and then you could probably guess it on this button it’s going to be location BTN and so now that we have this set up I want to be able to have them all kind of be down to start with kind of down here and and then that way when I roll over
00:06:40 they can they can come up and we want the section tile to be down here so what I’m going to do now is I’m going to take all of these and I’m going to change their position to Absolute and make sure that I’m just going to do the bottom here the bottom left like that and do the same thing to this guy and sometimes it gets kind of tricky to select them here absolute bottom left and then try to get this type you can see it gets a little tough if you have a hard time getting it you can always just right click one of them and do go to
00:07:14 layer and then you can go to the one that you want and and Target it that way so default absolute bottom left cool all right let’s check this out great so so far so good all right let’s keep moving here so what I’m doing now is because I wanted to position this title better I I got rid of the by default h3s have padding all the headings do and Divi so I have to zero them out and then here you see that I’m going to take the take the location name text make sure it’s at the bottom and I’m going to add my some this transition
00:08:10 all just adds a smoothing so when it gets animated it’s a smooth animation so that’s what that’s doing and then this one here is taking that location text and it’s going to make it invisible and then this one’s just going to make the location of the location button invisible so we’ll go ahead and grab all this and put it in and see see what we get okay there you go you can see those things being made invisible and so now all I have is just this happening so we’re getting closer get my CSS back up
00:09:06 All Right Moving On now we start getting into the hover state so in my location section row when a location which is what the column is the has a classification when that’s hovered go to my location name and instead of the bottom being zero that we set up here let’s set it to 220. I’m just going to copy that one and paste that one in and so now you’ll see that when I hover and you might have to you might adjust this but after you see on the live site but that’s what that’s doing that’s great and I’ll show you what I I guess
00:09:49 I’ll show you what I mean I’ll save this real quick go to the live one refresh so I kind of already dialed that 220 in to be like yeah that’s pretty good actually it looks like a little too much space so maybe we can go up a tiny bit more and you can test this by just right clicking on your column here go to your column and then choose hover simulate the hover and then you can right click on that text inspect it choose the module here 220. let’s raise that up to oh about 230 looks like what I really
00:10:29 want that right here so I’m going to go over and I’m going to update this to 230. and I’ll update it here as well even though at the end of this I’m just going to copy all the code and put it in I’ll just update it anyway so there we go now even back here it doesn’t look quite right don’t worry about that just go off the front of it okay so that that takes care of our location name same deal when location column is hovered now let’s bring the opacity of the location text because invisible up
00:11:01 to one and let’s do a hundred pixels and then the button let’s leave it where it’s at let’s just bring the opacity up and you can kind of see it happening back here a little bit let me go ahead and save this boom there we go very nice our button is going to work now if you wanted you could make this whole thing a link obviously by just going to the you know the column link here and putting in the same link as your button I’ll just do a a hashtag for now and by the way this demo is using our our Minima theme that we just launched
00:11:58 it’s it’s a pretty pretty nice theme definitely check it out but it has sort of a similar feature down here with these here this is this one’s using a blurb and we actually style the button in the for the blurb here but the similar ideas to what I’m doing here okay let’s take a quick look at the rest of the CSS because it’s just going to be the the tablet and mobile so it looks like let me go ahead and grab this background color of my my 95 red and that’s what I want right here I’m going to say 95 red right there so this
00:12:46 is going to say hey when the screen is 980 pixels or less which Divi’s tablet breakpoint is 980. make this 95 percent and then our location name let’s do a let’s just fix it at 183 and I’m gonna have to adjust these I haven’t adjusted these for tutorial yet and location text let’s let’s let’s just get some of these in there so let me go ahead and get all this code go over here paste it all in let’s save and again if you want your you know if you want the section to be taller you just go to your column padding
00:13:29 and up this number but if you up this number you’re going to have to change your this number here how how high up from the bottom this title goes on Hover because now you’re your whole your whole section is 100 pixels taller than you know so you just got to play with those a little bit but once you get them in it’s not once you get them in it’s not bad great and you might have to make adjustments too for the length of how much text is here you might have to make adjustments for that and maybe
00:14:04 even Target individual you know let’s say you have two of these side by side and this one this text is only two lines but in this one it’s five lines well then what you would do is you know you could add more than one class here you can so instead of this oops let me go back in here so then so then what I would do is in this column I would give this column location the location class but I also do a space and I would say maybe location one actually I’ve been spelling them out because one time I had issues with with
00:14:37 numbers at the end of so and then my other column would be location two and then you could and then in your in your CSS you would you would say you know location one hover do this or you could do location dot location one with no space and that’s that’s saying go find a go find a you know a a div that has a location class and also has the one class if the CSS a little if you want to get a better grasp on CSS we do have a CSS for Divi course that you can check out that’ll really help with that but all
00:15:18 right let’s take a look here on let’s go ahead and take it down and see what we do sorry all right so and not when this gets to 980 this guy’s gonna going to adjust and then there we go now you can see that it’s turned red on 980 and obviously I need to change a couple values like the 183 from the bottom that’s not going to work it probably needs to be more like you know we’ll say to 55 and this is going that needs to be this needs to be up a little more to so let’s say this one needs to be you
00:16:03 know we’ll say 90 so my this one needs to be 255 and then 90. so I’ll just go over here to my code and say Hey you know 255 here and 90 on this one grab it all come back over here put that in and then what I might do as well is flip over here to and and say Hey you know sometimes Divi wipes out your sizing on yeah see like it wipes it out I do 67 again and now it’s back but let’s say you know that looks a little wide we’ve all just do 50 or you could put in you could put in your own your own value
00:17:07 or whatever that looks pretty good so now that I’ve changed that I’m gonna have to edit these values again but no actually looks really good and then coming down to mobile you know you could change let me go down to mobile here and now I want this to be I want this maybe to go 90 you know 100 is fine but remember we added some padding over here right of like 35 so now what we need to do our margin left 35. so now we need to we need to combat some of that with some padding right here probably 70
00:17:54 yeah and that gets it you know that’s going to bring it back in here yeah there we go and again you can adjust the height on for tablet and mobile different heights how you want let me go ahead and get out of this responsive mode so yeah that’s the that’s the idea and that’s how to do this type so I oh yeah that’s the other thing so on tablet and mobile after you’ve after you’ve changed the values you might update your hover values if they’re different so here when I hover it’s still changing these
00:18:42 to you know 2 30 and 100. so I’m going to grab these two rules copy them put them down here actually I’ll just put them right by the so location name on Hover now it’s going to stay 255. it’s not going to move anymore and same thing here now you might not have to worry about this because tablet and mobile don’t really have hover but and I don’t need this text there okay great that’s all good now so now it’s saying hey 980 or less stay at 255 even if I hover stay at 255. location 90 stay at 90. so now this
00:19:30 isn’t going to happen let me go in here yeah so now that now it doesn’t happen all right well thanks for joining me on this and that’s how you make this cool effect you’re going to have to make some adjustments once you get your actual content in here and if the if they if the let’s say you have three of these and this middle text varies from three items to the ten line three lines of ten lines this might not be the best idea not to figure out a different way but like in the beginning example those
00:20:18 Church service times they all had the same amount of content so this was a good solution for that hope you enjoyed this one all right cheers y’all stay fly
Learn more CSS for Divi in mind with our CSS for Divi course
