All language subtitles for 073 Styling Menu Items.en_US

Now, let's finish styling our menu item component.

So what we need to add to make this component look like this component is a white background for our

content, a hover effect that increases the size of the background image.

As well as a transition in the opacity of that content box whenever we hover over it.

So how do we do that?

Well, first, let's go to our menu item component and let's go to our styles.

In our content, we are going to add a background color.

Of white.

And an opacity.

Of zero point seven.

And now when we look at our app, we see that we have that background.

As for the fort, let's go to Google fonts.

And let's look for open sans condense.

We're going to add that to our selection and then we'll copy.

This link that Google provides us.

Then let's go into our indexed HTML and add it right here underneath our other links that were provided

for us.

Now, inside of our access, let's add a rule where our font family in our body, so everything inside

of our body tags, we want to use open sans contents.

OK, now if we look at our application.

Or sorry, our content box is styled the way that it was before.

So how do we catalyze the title?

Well, because we're writing JavaScript.

We can actually use any JavaScript method that exists on strings, so because we know the title of the

string, we can call to uppercase and this will uppercase our text.

And as far as our cover transition goes, this is going to be a bit of success that I will explain,

but I don't want to go too in-depth about it.

But I'll definitely cover enough that everything should make sense.

So what we're going to do is we are actually going to add a new component first to our menu item component.

So our background image, we want it whenever we hover over our menu item to increase, right.

So we're going to add this.

Class name of background image.

Onto this device and this device is going to get that style instead of our containing div.

Now, the reason for this is because we actually don't want this image when it scales to be bigger,

right?

We just want to see the effect get bigger within our div when we hover over it.

So the issue here is that some of you might think, why don't we just wrap this div around our content?

While the problem is if we increase the size of this div, we don't want this to also increase.

We want the size of our content stay exactly the same.

So if we do this and we go into our styles.

We're going to add that background image selector and we're going to give it a width of one hundred

percent, a high of one hundred percent, so that that image is always the size of our container, right.

No matter what our menu item container size becomes, whether it's large or whether it's regular, we

want it to always have and share the same dimensions.

So then we want to move those background properties off of our d'Hiv and onto our background image.

And now if we look, we'll see that it looks like our content is actually inside as a sibling.

But we don't want this we want our content to always be in the center of our actual menu item, so what

we're going to do is we're going to add a display or sorry, we're out of position, absolute and position.

Absolute is saying that no matter what happens, no matter what other elements are on the page, the

position of this content will always be whatever the position calculation will be.

So it's kind of like if we were to add like a right value of one hundred pixels, which would mean that

it's coming in from the right side by one hundred pixels.

We're saying that those are the only things that go into the calculation of the position of our content.

Right.

Nothing else.

So now if we look, we'll see that our content is always in the center.

And now our background image has no children because this removes this from the flow of the elements

of our menu item.

So now the background image is the only item that's getting calculated in its flow.

So it doesn't consider this anymore.

And now it's taking up the whole size of our menu item.

Now, we need that hover effect and the hover effect is actually going to go on the menu item.

So I actually have that code written for you right here.

And let's paste it in and take a look at what it does.

So we're saying that using this hover selector for menu item, when you hover over it, I want the cursor

to go to a pointer instead of a arrow.

We want the finger.

And then inside of that, we're saying that any element with the class background image, we want to

give it a transformed property of scaling it by one.

So whenever we hover, we want to scale any background image inside of it by one point one.

So essentially one point one times the size of the current image.

Right.

And then our transition property is saying that we want to target the transform.

So whenever it scales, we want to take six seconds and then we want to use a covid because the value

of this so quick Bazza is a pretty complicated math calculation which determines the speed in which

this transformation occurs.

Now, it's going to be a lot to kind of explain this, and it's quite a big detour.

But you can I'm going to give you a link that will show you how you can understand what Cuba Bezier

does, but it just enables us to have a smoother transition as far as our transform goes.

And then we're also saying we want to change our content capacity to zero point nine whenever we hover

over it.

Now, if we look.

We see that our image is growing right, but it seems to be growing outside of the size of our menu

item, so this is an overflow and we don't want that.

Right.

But we're getting that effect.

So what we're going to do on our menu item is we're going to do overflow hided.

And now if we look.

We'll see that we have.

Our transition effect.

And just like that, our menu item now looks like our final product.

Now, before we continue, let's just commit all our changes, let's go back to our terminal and let's

just add everything that we've done.

So we have broken our home page into smaller components and then we also finished.

Styling are menu item component.

OK, and now let's push to master.

Awesome.

OK, now that we finished styling our menu item and our homepage, we're going to tackle routing and

how we're going to render different pages in the next lesson.