Elementor Text Over Image On Hover With Title 👍👍👍👈

hi guys and welcome to another elementor video this is jamie from system 22 and web designer techtips.com we've got another little hover effect for you today we've got an image with a little title on top of it when we hover over it it's going to pop in some content for us really easy to do we've got to do a little bit of coding for this today but a css coding don't let that put you off any code that i write i'll put below the video and this is really easy to do so let's get started i've got this page open here in my elementor builder now i've got the pro version installed this will work perfectly with either the pro or the free version the only difference is with the free version the css code you write you'll have to put in the theme customizer itself which is if you go down to your dashboard go down to appearance and customize additional css you'll find right at the bottom there you just have to put your code in here rather than where i'm going to put it with the pro version and it'll work exactly the same okay well let's get started so i've got a section here it's got three little columns in it let's work on this one over here first thing i'm going to do is i'll put a little text module in this column here so let's go to the grid here's a text editor module i'm going to go in there let's get rid of that and i'll just put in a title and i'm going to make it into a heading 3. obviously you make yours however you want okay next thing i want to do is put a little bit of content in so i'm going to drop down a little bit this is the what we're going to see initially over our image right here now i'm going to add the bit that we're going to have fade in so i could have left a bit of lorem ipsum in there but i didn't so i've got it open here let's copy this go back there and i'll just pop that in there okay well i want that to be kind of in the middle of our section so let's go to style and in the typography there i'm just going to hit center so everything's in the center okay and if you've watched any of my previous videos about image to text hover things you'll realize that the image that we're going to see actually resides in the column itself that's a dark tag to get in the column a little blue tab to get into the module so let's go into this column and do what we need to do so i'm going to go into the column and go over to style background type i'm going to hit the little paint brush icon there and here we can drop an image in so i'm going to choose an image let's get a different one this time and we'll pop that in there and as you can see it's sort of populated but position wise i'm going to have it top left attachment i'm going to leave it on the default i don't want it to scroll or be fixed repeat i don't want it to repeat size wise i actually wanted to cover the area that we've got here so i'm going to say cover now if we hover over our little module i know it's hard to see that writing right now but the little blue lines here and the little blue thing we've got some column spillage out of the top here and this is because our module has padding in the column there so we need to take that paddington away and we'll replace it with a bit of margin so while we're in the column i'm going to go over to advanced here's the margin here's the padding i'm going to put a zero in the padding so our little little items got no padding here but so we can separate it from the rest of the columns there i'm going to give it a bit of margin all around i'm just going to give it 20px obviously you give it what you want that way now our image and our module are the same size so we can create our hover effect nicely okay well the next thing i want to do is add a little background to this and change the text color to white so that we can actually see it so let's go in here little blue tab to get back in the module and we're already on the style tab at the top so i'm going to go to text color i'm just going to make that white that's a little easier to see but really it doesn't kind of stand out to me so i'm going to add a little background color to this so it's going to make that text stand out a little bit better so let's go to advanced and we'll go down to background here we can add a background type and again i'm going to hit little paint brush and we've got normal and hover here and we're going to be using both of those so here's a little paint brush hit that we can choose a color i'm actually going to put black in which is too much obviously but i want to see some of that image behind but i want to be able to read our writing nicely so so we can see the image and read the writing i'm going to pull the opacity this bottom slider down until we can see plenty of the image but we can still read our writing nicely something like that just gives it a bit of a tint on the background that's great well i can read that a lot better i want to give it some spacing all around so again i'm going to go over to the advanced we're already in there click the little arrow next to the advanced i'm going to give it a bit of padding all around if you've got this checked it'll do all four at once and again i'm going to just simply use 20 give it 20 pixels all round and as you can see we're actually covering the whole of the area with our little black background there which works perfectly so what we need to do now is make this bit disappear and only reappear when we hover on it and we want to keep this as it is now this is where the little bit of coding comes in so while we're in our module here i'm going to go back to content and in our little text editor here to make things easier i know we've aligned our text in the middle using our style but i'm actually going to select it all in here and just hit the middle as well and then i'm going to go over from the visual which is the default state to the text and you'll notice we've got an h3 which is our title and we've got a p which is our paragraph text so we can affect these differently if we give them a class or a handle that we can identify and by so just after the p right there i'm going to give it a gap i'm going to write class equals and we've got to give it a name that's going to make sense so let's open a couple of sets of inverted commas here and inside we can give it a class name let me give it the class of th text hover you can call yours whatever you want it does need to be unique and it wants to be something that you'll recognize to me that's my shorthand for text hover but like i say you can make yours what you want now we've given it a name we can go over to our advanced down to our custom css if you're using the pro version with the free version you'll have to go to your theme customizer and down to additional css and write it in here and it'll do exactly the same thing but so you can see what's going on i'm going to write it down here okay so we've given it a class of th all class names have to have a dot or a period in front dot th then we'll open and close some curly brackets drop down one and in between the curly brackets we can write our code so initially i don't want to see that at all so i'm going to say opacity or transparency or see-throughness colon zero that means totally invisible and as you can see it's disappeared right away and opacity can go from zero zero point one zero 0.1 0.2 all the way up to 1 which is fully visible so i'm going to take this copy the whole thing ctrl c to copy i'm going to drop down a couple and don't forget i'll put this text below the video or this code below the video you're welcome to copy it and use it now just after the h of th with no gap i'm going to put a colon and the word hover and no gaps after the colon and before the hover and i'm going to change that opacity to one fully visible so now when i hover over it it's going to appear but that's kind of appearing really instantly or really quickly i want to slow it down just to make it a little more graceful so in the regular state i'm going to drop down one and i'm going to say transition duration t-r-a-n-s and it's prompted us down low down below transition duration just click on that and i'm going to say 1.4 s for 1.4 seconds semicolon that'll slow it down a bit a bit more graceful there obviously you put in the timing that you want for yours to happen now that works great but there's one little problem if i hover over the top here nothing's gonna happen until we get down here which some people might miss that because the great thing about these is when people are mousing over your site if you do something and something happens it'll get their attention really quickly which is what you want on a website so we've got to sort of fool this and make it so it it does it pretty much everywhere on this square i mean we're going to have a few gaps at the side where we've given it padding but we want it to do it when they come over the top when they come in from here so let's fool it with a bit of padding and negative margin so what i'm going to do is say padding top padding dash top and i'm going to give it about 180 picks i'm guessing this sort of top of here there's about a hundred don't i think 200 would be too much so i'm going to go 180 obviously you play with yours and and do whatever works for you so i'm going to say 180 picks and as you can see that's made that grow because that's actually pushed it down by 180 pixels down here so what we want to do unless you want to see that much of the image is we need to drag it up with some negative margin so that if we hover over here it'll appear as well so let's drop down one more and we'll say margin top margin desktop minus 180 and i'll drag it back up again should be the size it was before but now when we hover over the top here it's appearing i mean there's a little gap but not much of a gap there a little gap on the sides but not much of a gap no that works if people are sort of mousing around they go over they're going to see that so that's pretty much all there is to it one other thing i kind of like to do that i did on this one is make it slightly darker when that text comes in so we can do that without any more coding if we simply go to our background here we set the background color for normal state remember we're in the text editor module not the column if we go to hover now we can set a different one for that simply go to hover hit the little paint brush grab the color again i'm going to make it black but i'm not going to take the opacity down as much this time i'll take it to about here and you can hover over and check it that may be a little too much still there we go that's kind of nice see there's the original you can see the image and the title nicely when we do this and the text comes in darkens out a little bit more and that's just another thing to catch the eye so we should be good to go with this so if we update hit the little eyeball to preview changes there it is right there hover over there it is coming from the top there it is great and don't forget to check out our other elementor hover effects from our little playlist i'll put the playlist below the video we've got various different things that go go on here it's a little image morph with button and there's just a button coming in there and there's text reveal and we've got things with tabs and that's just a simple image swap so there you go guys that is how to add a little text over image with the elementor and like i say that'll work just as well with the free as it does with the pro version and that's a nice little thing to have on your site so i hope you've enjoyed this today and found it useful if you have please give it a thumbs up ring the bell comment share and subscribe to our youtube channel once again this has been jamie from system 22 and web design techtips.com thanks for watching have a great day

Channel: System 22 I.T. Solutions

Views: 3,121

Keywords: Elementor, Elementor Text Over Image On Hover With Title, elementor page builder youtube, Elementor Pro Text Over Image On Hover With Title, wordpress Text Over Image On Hover With Title Using Elementor Page Builder, Wordpress Text Over Image On Hover With Title, Text Over Image On Hover With Title, Elementor Create Text Over Image On Hover With Title effect, system22tv, elementor pro 2021, elementor pro tutorial, custom hover effects with elementor

Id: IY-HtRT7uOU

Length: 14min 13sec (853 seconds)

Published: Sat Jun 12 2021

Reddit Comments

[u/System-22]

Elementor Text Over Image On Hover With Title. Elementor is a great free WordPress page builder plugin. There is a free version as well as a paid version of Elementor. In this series of videos we will be building some great elements on our WordPress website with the Elementor builder.

In this video we are going to create a simple hover effect. We are going to create an image with a title in it. When you hover or tap anywhere over the image it will reveal some text content. This a very eye catching feature to have on your Elementor website. If visitors are mousing around your site and this effect happens it will get their attention quickly, which is what you want on a website!

There is a little bit of coding involved today to build this feature. Don't let the CSS coding put you off, it is very easy, and any code I write today I will paste below the video for you to use as you wish. You are welcome to copy the code and paste it into your site, CSS is a great thing to learn, so I encourage you to try out some of your own ideas to get familiar with it. You can't break your site with CSS, if something doesn't work simply delete the code to return back to how the site was previously.

So, follow along and see how easy it is to create a text over image on hover with title, to a page built with the awesome free or pro version of elementor page builder

For more information on the Elementor page builder plugin check out our Elementor playlist below.

My Elementor Video Playlist : https://www.youtube.com/watch?v=yN6YlT1Cvqc&list=LLYeyetu9B2QYrHAjJ5umN1Q

Elementor Hover Effects Playlist: https://www.youtube.com/playlist?list=PLqabIl8dx2wqkGuqlL4RRLwJnBRO47jm2

Get Elementor From Here: http://bit.ly/GetElemrntor

---------- CSS CODE USED TODAY ----------

.th {

opacity:0;

transition-duration: 1.4s;

padding-top:180px;

margin-top:-180px;

}

.th:hover {

opacity:1;

}