Divi 3 Grayscale To Color Image Hover Transform With Scale


hi guys and welcome to another Divi
WordPress theme tutorial this is Jamie from system 22 and a web designer tech
tips calm or gonna do in this little video here
we’re gonna create some images that when you hover over them they’re gonna start
off as grayscale and when you hover over them they’re gonna grow and turn into
color images it’s a nice little effect it’s pretty easy to do too so let’s get
started okay so I’ve got my Divi theme open here
and as you’ve heard me say many times before if you’ve watched these Divi is
absolutely awesome and it just keeps getting better if you want to try it
check it out from the link below this video I’m going to enable the visual
builder here now it’s enabled I’m gonna go down and
create another room I guess I’ll go below these doesn’t really matter this
is just a demo page I’m gonna create a regular row inside that row let’s make in a column
of four it’s okay don’t want to have anything just
yet I’m gonna cancel out of that so here’s
our section and here’s a row with four columns in it I want to edit these
columns and I’m gonna make our images within the backgrounds of these columns
and there is a reason for me doing this rather than using images or
what-have-you blocks because in the next video I’m gonna do a text overlay that
appears when you hover over it and this just makes it easier to do that and then
further on down the road I’m gonna do one about modal’s using modal’s with
Divi which is actually not present in the Divi theme so I’m going to use an
external plugin for that anyway back to the job in hand here is a row of four
columns let’s hit the little cog to edit the
column and I want to go to the background and I want to add a
background image to column so oh actually scroll down this column one
background go to the image tab add an image I haven’t really planned this I should
have got some better images ready let’s just use what we can find here hey that
one we’ll have to give this a bit of padding to actually give it some height
so we’ll do that okay design tab down to spacing and now we want color one from 150 bit more like it let’s give the bottle 152
you you okay I think that’s gonna work what I’ll
do is I’m gonna copy this to the other columns as well because I’m just going
to add some images behind those also so-called – it should be 150 I don’t
know how I cut that off there maybe these well put it back together
yeah it’s that’s fine top and bottom that’s fine also we can add the link to just add it
to there automatically it’s fine let’s add our custom images now to our
other three columns so back to content back to background
come one background we’ve got on to background image and I’m just going to use the first ones
I see here there’s two to sync the three thing going to this one and similar for
color for okay image at the image use another one
with a bit of color on it let’s use that one okay so we’ve got our four images
let’s just save that what I want to do is have these appear
grayscale so there’s no color in them and then when we hover over them I
actually want them to enlarge and become color so let’s given this a CSS class so we
can actually target it so we’ll go back in there go to the advanced CSS ID in
classes and color one CSS ID we want a class I guess I’ll quit zm4 zu z them
however you like to say it and I’ll give the same class to the rest of these on
to class on three class and call for car now we can target them with a bit of CSS
so let’s save this let’s save what we’ve done there and exit the visual builder when it
saved here’s our three little combs which is
fine it’s not what I want now let’s just select one of them
and let’s make that one grayscale so I don’t the row
my own thing or with it doesn’t really matter which
one so think that’s it right there and let’s add a bit of CSS I should show
our class yet there’s our class Z M and we’ll say filter because we want it to
filter the image and what do we want to do want to give it a grayscale that CIA
why SEO le open and close some round brackets no gap and we want to tell it
to do it a hundred percent so all the way to grey there we go and
as you can see that’s turned green okay that’s fine so let’s just copy that bit of CSS we’ve
got everything we need right now and let’s go to our DV options this is CSS
whoo you can do it in the customizer in the additional CSS it takes you to the
same panel and all we’ve got here is we’re down at the bottom we’re in Divi
we’re in theme options and it’s down at the bottom of the page here
so I’m gonna start at the top again I’m gonna put a title in so we know what’s
going on four slash star star forward slash it makes things easier to find
when you’ve got lines and lines of CSS just give it a title there and I guess
I’ll call it zoom image probably them either X in there touch of fight finger
there okay so we gave it a class wolves are classes
Z M or Z M terms class so it’s a dot cm for zoo but I open and close some curly
brackets and inside we’re going to paste that bit of code that we just copied
filter grayscale zero now let’s just say that and go back to our page now when i
refresh this page all of those should turn gray grayscale like that so let’s
refresh because they’ve all got that same class so anything that you add the
class ZM or zm2 it’s going to turn it to grayscale like that
all right that’s an objective one achieved which is to turn these to
greyscale next thing is when I hover on it I want it to zoom and get bigger so
we can see the image better and I also want it to be color as well so let’s do
the color first I suppose that’ll be the easiest we’ll go back to our options
here back to our CSS editor I’m gonna go ahead and copy this from the dock of the
ZM to the closing curly bracket there ctrl C I’m gonna drop down to doesn’t
matter if you drop down one or two but I just like to give it a bit of space
finally easier to read that way now after the ZM or Z M I’m gonna hit : and
this is really important no space you don’t want to space in there and just
right hover and that’s gonna say when we hover our mouse over this ZM element we
want something to happen so the first thing we want to happen is that we want
that grayscale to disappear so let’s just take the percentage down to zero
and that should make it have no effect whatsoever so it kind of takes it from
all the way up to all the way down let’s save that and we’ll take a look back to our page
refresh nothing should have changed but once we’ve refreshed when we hover over
one of these images here it should turn to color again let’s try it yeah there
we go happening a little bit quickly but it’s
happening so that’s the main thing so we can fix that all with a bit of
transition CSS in a minute well I guess we’ll do that now let’s go
back to our hover and not in the hover state but actually in the main class
itself we’re gonna have a bit of transition CSS so we’re gonna say
transition : and we want it to everything that’s going on we want it to
affect so we’ll say all and what sort of time do we want say give it a second and
a half maybe always change it 1.5 seconds or you can do it in milliseconds
or you can do it 0.5 seconds for half half a second and how do we want it to
happen we want to sort of ease in and then ease out we don’t want it sort of
jumping in and jumping out so we want to we’ll say ease – in – let’s just sort of
ease it in and ease it out so let’s just say that of the check mark back to the site
before refresh I’ll just remind you what it
looks like now which is fine it’s working but it’s doing it instantly when
i refresh it should take 1.5 seconds to make it go back to the calibration so
let’s refresh you now it’s refreshed let’s have another
game there we go it’s a lot more gentle it’s a lot more subtle as you can see
it’s taking 1.5 seconds you can make it longer or shorter however you like to do
it but I think that makes it a little bit more interesting having it doing it
slower like that okay so that’s objective to a let’s try
that again that’s objective to achieve now our objective 3 is when we hover on
it I want it to get bigger I want to see a bigger sized image and fuller image so
let’s do that let’s go back to our theme option now when do we want it to happen
we want to want it to happen when it hovers so we’re going to put it in the
hover CSS here and we’re going to use a bit of CSS scale so we’re gonna say
transform and then we’re gonna hit a colon and we’re gonna say scale and open
and close from round brackets and in between those round brackets I’ll put a
semi total on the end is how much we wanted to scale by to win it scale by
half but that would make it smaller do we want to scale by one-and-a-half
that’d be 1.5 let’s try three pets gonna make it pretty big that may be too much
so we’ve got transform scale 3 save our changes again
you and back to the site now when we refresh
and hover over this not only should it start to color out
it also should grow if I’ve written it correctly in the CSS there all right let’s try ‘no there we go Wow
I don’t know there’s a little bit big maybe as you can see it’s taking
one-and-a-half seconds to do that and it’s still going from black and white to
color you know one on 1/2 seconds also I think that’s a little too large also
we’ve got this next door image that little one to the right is on the
top of it I really want that behind it every time it does that so we can do
that easy enough so let’s take
that scale down to maybe two I think the threes a little bit too big and fix the
issue you fix the issue with the little image
being on top there we can do that pretty easily again with some CSS so let’s do
that and again we want this to happen on the hover
when it actually hovers so let’s try that so let’s take that scale down to to
make it a little bit smaller three was a little bit big but of course it’s your
site that’s entirely up to you now the problem we had was the large
image was well the small image was appearing on
top of the large if we go back that little image on the right there is
on top of our large image I don’t know I don’t want that every time an image gets
large like this I want it to be on top and everything else to be behind it we
can fix that with a bit of Z index or Z index CSS so Z index and we’ve got to
give it a high number just to make sure that it’s you know the higher the number
the more in front it is and you can do negative numbers to make things go
behind other elements but I’m just gonna give it 9 9 9 9 9 9 so that’s pretty
high number right there I don’t think anything else will be on top of that so
let’s try that save this back to the page and let’s refresh this
time that image should be a bit smaller because it should be only twice the size
because we’ve only scaled it by two and hopefully it should be on top of all the
other images there we go that’s more like it yeah I
like that size a bit better and as you can see each time we zoom on one the
other images are behind it there which is great which is what I want all right
so that’s objective three inch it achieved I think there’s one last thing
I’m gonna do what I’m gonna do is when it hovers I’m just gonna add a bit of
box shadow under here so it stands out even more so let’s do that quickly so
we’ll give it some box shadow and I’ll do one of my usual which is sort of five
pics by fifteen pics by twenty five pics and we want to give it a pretty dark
color so let’s say try seven seven seven we might want to go a little darker with
that okay what have I done wrong here it’s a
haha I put an M on the pic say you see it’s got a little X there telling me
I’ve done something wrong but an M on the pics there you’ve got to spell
things right if you want to work so say my changing now refresh now when we mouse over when
the page is loaded should have a nice box shadow behind it there we go yeah I
kind of like it there but I’m not sure about the box shadow that blue down at
the bottom let’s make it a little bit darker it’s good for black it’s always a
bit of a winner so let’s make it zero zero zero for black save those changes you
you refresh the page now let’s take
there you go that’s stand out nicely there okay so there we have it that is
how to make some grayscale images and have them turn to color when they zoom
and adding a bit of box shadow nice little effect works well in our next
video I’m gonna add some text overlay so that when it zooms you’ve got a bit of
text that comes up here perhaps with a gradient behind it so you can read it
so I hope you found that useful if you have please like to share and subscribe
to our YouTube channel if you’re interested in web development
take a look below we’ve got some great free courses and there’s also some
premium courses down there with some huge discounts for our YouTube
subscribers so once again this has been jamie from system 22 and web design and
tech tips comm thanks for watching have a great day

Add a Comment

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