Voiceover: Hello back and welcome to part 2 of
Building the favorite meals section.
Let's go straight back into brackets.
So let's continue formatting this section.
Now the first thing we notice and that we didn't correct yet
is this large distance between this two section,
which doesn't look natural and that's because
this section like the other section, as well,
has a big padding which goes like, until,
here.
We actually don't want this section to having padding.
Because it's a different section,
it doesn't have a title and everything
so we don't want this section to have a padding like that.
So let's quickly correct that.
So this section is called,
Section, I honestly don't remember
Meals, of course.
So section-meals,
I will say padding zero
and that should solve the problem.
Yeah so this looks much better.
And next, next we will do that
animation
I was telling you about.
Now what this animation is all about
is that when we hover one of the images
the image kind of zooms out and also gets lighter.
So we want to make the image dark and zoom in
so that when we hover the image,
the image can zoom out and get brighter.
Once I see this, you will get the idea.
So we can use a powerful
CSS3
property,
which is transform.
We actually already used that before,
now we're going to use it again.
So in this case, we will scale the image,
in fact, all of the images we will scale them
to like, 1.15,
and this means that the image
will be instead of 100%,
it will be 115% big.
So let's see this in practice.
So these images have grown.
They are bigger than they are supposed to be
and you see they even go out off the browser width.
It's even bigger than the browser now.
And we will fix that in a moment
because we don't want these images to be bigger
than their container, which is meal-photo.
So right now, the image just kind of
overflows its container.
So what can we do about this?
There's a nice little property called overflow
and if we set it to hidden,
then that overflow will not be visible
and we just see the part of the image
which is still inside of the container.
So let's see.
Alright, so this is exactly what we want
and now what we want is to change that transform
property when we hover the image, right?
So let's do exactly that.
And maybe you already see where this is going.
So what I'm doing now is
meal-photo image
and now we can also use this
hover state for everything.
This doesn't work only for links
even if we only use it for links until now,
but it works really with every element.
And so what do we want to happen?
We want this transform
to go back to normal, right?
So we scale it to one.
Let's see if this works and if you get the idea.
So, so this is what happens.
Don't worry, we will put an animation there in a moment,
but this is what happens.
And you see there is actually, like,
a while little line down there
and I actually can't tell you why that happens,
but I know a good solution to that.
So instead of scaling it until one,
I'm just gonna scale it to 1.03
and this should solve the problem.
And also I want to, of course,
animate this transformation
so what, how can I do it?
I say
transition
and then transform
and let's say
hold for seconds 0.5 seconds
and this should already do the job.
So this is exactly the same thing
as we did with our links here, right?
We defined the transition with the interval
and then with the hover state,
we said what would happen.
So this is what we did right here so let's check it out.
Okay, this is very nice, right?
This is really, really cool, don't you think so?
It's a beautiful effect,
but we will go even further than this.
So, as I said in the beginning,
we will make this image darker
and then as we hover it, we'll make it lighter
and that's quite easy to do.
As we built the header, we learned how to make
a background image darker, which was our here image, right?
And now let's try to make this image darker.
Let me show you how we're going to do that.
So if we set the opacity,
yet another CSS property,
you see, you're using a lot of properties here.
I mean, I'm covering almost everything
that you need to know with just this website.
So opacity 0.7,
so this is 70%.
Just to show you, let me show you what this looks like.
So this is kind of white now and it's white
because its background is white
so if we want to make this darker,
we just put the background
of this image to black,
zero zero zero.
So behind that image, we now have a black container
and since this image is now opaque,
it will get darker.
Very well
This looks really great, right?
And now we just have to
animate
the opacity here.
So when we hover, we also want the opacity to change
back to one, which is 100%,
and in order to animate it, we put it right here
so opacity
opacity 0.5 seconds
and now we should see both of the things animated.
And here we go, wow this is really exciting, right?
This looks so great.
You see how simple this was?
So I think the section is also done here.
Another thing that I noticed
when I was revisiting this section here
was that we maybe need some space
between this paragraph here and these columns.
So what I'm going to do is
add some bottom margin to this paragraph.
So if you remember, it's the long-copy class,
and I will again
make a little section here for that
called features.
Alright, because
where is it, so it's this, it's this class,
but I don't want to make a margin to
to all long-copy class
element that we will use throughout the website.
So again I'm using the long-copy
inside of the section-features
so let me just copy this.
See, this is a very usual practice.
So section-features and then the long-copy,
which is inside of that,
and then we just specify its margin bottom
and set it to 40 pixels
and now,
this looks much better right?
Okay, probably 40 was a little too much.
Again, this is, this is really designing
in the browser and it's really great.
Yeah, this looks cool now, don't you think so?
So let me revisit the whole thing.
We designed this section,
everything beautiful,
then we did this section,
and now we even have this powerful transition stuff.
Wow, you've learned such a lot so far,
a lot of CSS properties.
You should probably take note of them
or copy them somewhere so that you have
a whole list of things that you can do with CSS.
So that's it for now and maybe you want to take a break now
or you can just join me in the next lecture,
where we will design our next section.
So see you there and bye.