Elementor Simple Image to Text on Hover Effect

Simple Image to Text on Hover Effect. Welcome to another Elementor video. Well we had a question on one of my other Elementor videos. Somebody wanted to know how to have some text, and when they hovered over it, they wanted to change it into an image, fade into an image. I’ve got a whole series on Elementor hover effects, and I’ll put the playlist link below the video. Here’s a really simple way of doing it.

So I’ve got this page open already with my Elementor builder here. I’ve got a section with three columns in it. Let’s just add a text module to our third column there. Text editor module. Simply left click, pull it over and release, and there it is. I’ll do the same as I did here. Let’s just drop that down, and we’ll make the first two into a title. There we go, fantastic! Now we want to hover over this and have it disappear, and have an image appear.

Now the way this works, and a lot of these hover effects do. The image itself is going to reside in the column, the little dark tab there. The column that the text module is actually sitting on. There’s a little gap top, bottom, right and left on our column, between the column and the text module. We’ll get rid of that and we’ll put an image in.

So let’s now go into the column. We’ll choose an image. Go to style. You’ll find background. Just open it up, hit the little paintbrush there and it’ll give you a place to add an image. For our example here let’s grab that one, okay let’s put the image in there. If your image looks like this, you can change the size of it down here. I’m going to have mine cover, or you can contain, which will just show the shape of the image, and it’ll do a duplicate underneath. Cover works perfectly for me though, so I’ll leave mine on cover. If we hover over, like I said, there’s a bit of space in our text module, in our column, between the column and the text module there. Let’s get rid of that.

To do that we need to go to the advanced tab, go down to padding right here. Just put a zero in that first column. As long as this little chain is checked, it’ll do all four at once for you. Now we’ve got no space there, that’s just exactly what we wanted. But of course, we don’t want to see that image until we hover over it, so we need to cover it up with the same color background as our page here.

So, let’s go back into the text module. Go to advanced, down here you find background. Hit the little paint brush. Let’s add a color. I know my background’s white here, so I’m going to make it white by dragging, top left corner there #ffffff is white, and as you can see that’s giving it a white background, covering up some of our image here.

But we want to cover up the top bit and the bottom bit. So let’s give it a little bit of padding to try and do that. Still in our advanced tab, we’ll go up to advanced padding, I’m going to uncheck this because I just want to do the top and bottom. Let’s try giving it 50 on the top and 50 on the bottom. There we go that’s covered it up nicely, and also, I think I want to put my text in the middle. So we’ll go to style and center align the text. Fantastic! So we can’t see our image and we can see our text.

Now we’ve got to use a bit of custom CSS to make this disappear. Still in the text module. I’m going to go to the advanced, and you’re going to find CSS ID and CSS Classes. You can do it with either. We’re going to use a class today, and I’ll call it ‘hovbox’. You can call it whatever you want to call it, as long as it makes sense to you, and it’s got to be unique obviously, because if you create any other boxes and give them this class, they will do whatever we tell them to do with the CSS we are going to write in a moment. Okay so we’ve given this a CSS class. I want to make sure this is updated.

If you’re using the Elementor pro version, you can put custom CSS in here. I’m going to presume you’re using the free version. I’ll show you how to do it with that. What I’m going to do now, is make sure this page is all published. I’m going to go over to my theme customizer.

If you go down to dashboard, appearance and customize. It’ll bring you to this page right here. Now I’ve already got mine set as the home page right here. What I suggest you do, is temporarily make this page your home page, so you can work with it with CSS. You can always change it back afterwards when you’re done. You can see it right here. You don’t actually need to do this, but it just visually helps you out a little bit.

Now let’s go to our additional CSS, and this is where we’re going to write our CSS. So we gave it a class of ‘hovbox’. All classes have to have a period or a dot in front of them. So it’s a dot, then the class name of hovbox. Now we want to set a hover state for it. After the x of hovbox. I’m going to put a colon and with no space. the word ‘hover’, so that’s no space between the x and the colon, and no space between the colon and the hover. I’m going to put a space, and open and close some curly brackets. Inside the curly brackets is where we’ll write our CSS. Now basically that’s saying to hovbox, when we put our mouse on it what do we want it to do? We want it to disappear, so I’m going to make it transparent by saying opacity: 0; and opacity 0 is completely transparent, and opacity:1; is fully visible, and you can do increments of 0.1, 0.2 etc. and increment up in see-throughness if you will.

Okay there we are and it’s working already. When we hover over that image is jumping in there, just what we wanted. But that’s kind of instant. I like it to be a little more graceful, like this one here. That’s entirely up to you though! If you want to do that, we’ll just write another bit of CSS

To make this a bit slower, let’s give it our class name again. Class name period hovebox, space. Open and close some curly brackets, and this is just a regular state now, when our mouse is not on it. What do we want it to do? I want to say transition-duration: and we’ll give it a time in seconds you can give it 0.5 seconds, 0.2 seconds, or 1.5 seconds. I’m going to make mine fairly slow so I’m going to say transition-duration: 1.2 s; and that should slow it down to 1.2 seconds and be a bit more graceful. 

Now the image is in, when you hover, it fades out gradually, and the text fades in gradually. I like that, so we need to hit publish now to make these permanent.

Let’s go back to our page and refresh, and just make sure it’s going to work on the front end here. I’m sure it will. There we go, there’s our image. When we let go of it, there’s our text, when we hover over our text, it changes to the image. Really simple hover effect, but it’s very effective. Now if you wanted to change it around. If you wanted to have the image first, and then when you hover over it, the text to appear. Just flip around your CSS over here.

So let’s go back in here and we’ll flip it around. On the hover state we’ll say, opacity:1; and we’re going to say opacity:0; in the regular state, and it should disappear as soon as I put the zero in. There we go. Now we’ve got an image, when we hover over it, the text is going to appear. It’s the opposite of this one here. Really easy to do, like I say, I’ll put this down below the video. You’re welcome to use it how you will.

Hit the publish to make it permanent. Go down and refresh our page here. That image should appear when we refresh the page. There it is. Now when we hover over it, we’ve got the text. So there you go, there’s image to text, and there’s text to image. really easy to do so I hope that answered your question and like I say I’ve got a whole series on Elementor hover effects I’ll put the playlist below the video. That’s easy it is to create an Elementor Simple Image to Text on Hover Effect.

Here’s the CSS code used today:

/* Image to Text */

.hovbox {
opacity:0;
transition-duration:1.2s;
}

.hovbox:hover {
opacity:1;
}

/* Text to Image */

.hovbox {
transition-duration:1.2s;
}

.hovbox:hover {
opacity:0;
}