Divi 3 Image With Gradient And Text Overlay On Hover

Articles

Divi 3 Image With Gradient And Text Overlay On Hover


hi guys and welcome to another Divi
WordPress theme tutorial this is Jamie from system 22 and web design in tech
tips calm well in our last video we did this sort
of grayscale to color hover effect with zoom here
in this one what I’m going to do is I’m going to add a bit it takes to these
modules that that’s gonna appear when we zoom and while I’m doing now I’m gonna
disable this zoom cuz it’ll just make things easier to work on so I’m gonna go
back into my theme options and just comment out some of the CSS here by
going forward slash star you
and forward slash start over that too or star force left to finish the comment
there we go I’ll just say that that should stop it zooming for the time
being okay let’s just refresh that yeah that’s better so I’m gonna add a
text module at the moment these are just columns with an image in the background
of the columns with that actually no content in the columns I’m now gonna add
some content so I’ll have to change the padding there so let’s enable the visual
builder you now once it’s enabled would go down
here’s our little row with our four different columns in it let’s add an
item I’m just going to add a text item scroll down the text there it is
okay and let’s add a little title what I’ll do is I do my usual little
cheat so I really haven’t got any text in mind for this heading 3 okay so what we’ve got we’ve got a
little text module in between here now and our combs actually got padding top
and bottom I’m gonna remove that now that we’ve got something inside it
we had to put some padding in there to make it as tall so we can display the
image so I’m gonna remove that by going on the road called and going to design
spacing and here we are and you should see it
just shrink down to the side of the text module itself there which is fine I’m
removing this from all the columns we’re on column three now
and come for there we go so as you can see they reverted to the size of the
actual text column itself all right so let’s style this text column we’re gonna
go on its little module Kok right here and I’m gonna go up to design spacing
I’m gonna give it on a margin on the top push it down I’m gonna give it a margin
of say 50% that way that should stay similar when we when the image enlarges okay that’s fine
and its give it some padding of 25 all around I guess there we go that’s given the content a
bit of padding all around I’m gonna get rid of a little bit of
that content I’ve got more than I want in there so let’s take some of this off already
or anyone a couple of lines that’s more like it something like that
I will double be plenty but as you can see it’s it’s a little difficult to read
so we want to give it perhaps a background color and make that
text light so let’s go to background we’ll give it a gradient and the gradient color will make it
solid black at bottom now we use black again at the top but
we’ll bring the opacity down so it’s more like a regular gradient then I’m gonna play the quite ones much
that with the starting position and an ending position you you I’ve got something that I like yeah I
think that’s gonna work I’m so real dying at the bottom but it’s enough at
the top there we’re gonna make that text right that it should stand out nicely so
if we go to the design or go to text and we’ll make that text light
text color just change that in light there we go that stands out quite nicely
I think that’s fairly legible you can always bring it up a little bit more
I’ll change that gradient a little bit more if you want to what else do we want to do here thing
that’s probably gonna do it okay that’s fine
but actually on the non Havasu I only want this to appear when we’re hovering
over so what I’m gonna do is give this
element our text element that we’ve just created here I’m gonna give it a class
CSS class or an ID if you want to I’m going to use a class here and we’ll just
call it P zm4 teksu call it whatever you want just remember what you you’ve
called it and what I’m gonna do is rites and customs
yes and I’m gonna have this invisible until we hover over it and it’s pretty
easy to do let’s just save this and once it’s saved will exit the visual
builder you and what I’m gonna do is I’ll write the
CSS that’ll make that disappear and then we’ll do some hover CSS to make it
reappear so here’s that stuff I commented out
before I went she go well I’ll leave that I’ll leave it out for a moment
we’ll put it back in a minute I’m gonna put this below this and was it
tzm wasn’t that type of zooms and open and close from curly brackets and to make it disappear I’m gonna say
opacity opacity however you like to say it zero that should make it invisible
but it’ll still be they’ll still be taking out that space so that image will
still be the same height whereas if we said
display:none that would make it disappear and the image would pretty
much disappear because there would be no height of it also when you hovered over
it if you wouldn’t be hovering over anything cuz it wouldn’t exist
so you opacity is the way to go and what I’ll do is I’m gonna copy that from the
dot to the curly braket drop down a couple pasted in there and on the dot TZ
em I’m gonna write code on cover no space between the colon on the hover
that’s really important it will not work if you do that and I’m gonna change that
value to one which is full opacity or fully viewable so it’s solid and you can
do naught point 1 2 3 4 5 6 7 8 9 to the amount that you want it to that’s fully
visible that’s invisible let’s save my changes and refresh the page it should disappear
when i refresh yep it’s disappeared now if I hover over it that text and the
overlay should reappear there it is but as with things before it’s appearing
instantly I really don’t want to do it I want it to sort of gradually come in say
over a second and a half like we did with the zoom effect earlier on
so let’s add a bit of transition CSS in the main class not the hover class in
the main class so I’m going to say transition and we’ll give it whatever I
say about a second and a half something like that we wanted to do it with
everything in there so it’s transition or 1.5 seconds and we’ll have at ease in ease – in – ow
– it sort of gradually comes in it’s in and you let go of it with the mouse it
eases back out again and put a semicolon on the end of that quick save see what
we got going on here back to the page and a refresh shouldn’t see any change initially now
when we hover over it that should appear but take her for a second 1/2 that’s a
bit more like it’s more gradual that way I just think it looks a bit better if
you do it like that okay job done so what I’m gonna do is I’m gonna copy this text block who
was these because we still had she got things there that’s what yeah
: with an image background looks like when there’s nothing in it so let’s put
something in it we’ll copy this let’s enable the visual builder again
and after I’ve done this what I’ll do is go in and re-enable that zoom effect and
it should happen for all our modules there okay
so here we go here’s our textbook let’s copy it
and I can’t see it because I’m not zoomed on it you have to be on it to
actually see it and let’s just move it over to here same thing here copy two little blocks
there take it move it over here and one more
time and we can’t see it until we zoom over all right there we go so we’ve got that’s fine if you want to leave it like
that that’s great you just got a little text overlay effect going off but let’s
rename all the CSS we had before where it starts off as grayscale and then it
zooms in with color and see what happened so we’ll save this and once it’s saved will exit the visual
builder now let’s go to our options to our CSS again now let’s take that little
closing comment tag to star forward slash off the end of here and let’s take the one off just before
the dot see em here when we put on there we own it’s colored now so it’s all
active save our changes go back to our page and refresh now when they as you can see they’ve
already gone greyscale now when we hover over these they should scale up to two
times the size like they were doing before plus if we hover over that text
block it will do that as well so let’s try there we go that textures coming you can
have it Havel with out or if you just roll down a bit more your text will
appear again you can have it hover no text just roll down to the text block
and it will appear or if you put your mouse in the middle or somewhere on the
text block it’ll just grow with the text as well and as you can see that’s taking
a second and a half to do all that go from grey to color and for you little
text block to appear if we pull one in with no text let’s see and scroll down
it should take about a second aha yeah he’s as in easy zap he’s in easy there
so there you go little extension of what we had going on there so that’s how easy
it is to put a text overlay with the gradient background on your image
I hope you found that useful if you have please like share and subscribe to our
YouTube channel if you’re interested in web development take a look down below
we’ve got some great courses down there some great free courses also some great
premium courses down there with some huge discounts for our YouTube
subscribers so do take a look once again this has been jamie from system 22 and
web design and tech tips comm thanks for watching
have a great day

Leave a Reply

Your email address will not be published. Required fields are marked *