Voiceover: Hello back and welcome to part 2 of 2 2
Building the favorite meals section. 3 3
Let's go straight back into brackets. 4 4
So let's continue formatting this section. 5 5
Now the first thing we notice and that we didn't correct yet 6 6
is this large distance between this two section, 7 7
which doesn't look natural and that's because 8 8
this section like the other section, as well, 9 9
has a big padding which goes like, until, 10 10
here. 11 11
We actually don't want this section to having padding. 12 12
Because it's a different section, 13 13
it doesn't have a title and everything 14 14
so we don't want this section to have a padding like that. 15 15
So let's quickly correct that. 16 16
So this section is called, 17 17
Section, I honestly don't remember 18 18
Meals, of course. 19 19
So section-meals, 20 20
I will say padding zero 21 21
and that should solve the problem. 22 22
Yeah so this looks much better. 23 23
And next, next we will do that 24 24
animation 25 25
I was telling you about. 26 26
Now what this animation is all about 27 27
is that when we hover one of the images 28 28
the image kind of zooms out and also gets lighter. 29 29
So we want to make the image dark and zoom in 30 30
so that when we hover the image, 31 31
the image can zoom out and get brighter. 32 32
Once I see this, you will get the idea. 33 33
So we can use a powerful 34 34
CSS3 35 35
property, 36 36
which is transform. 37 37
We actually already used that before, 38 38
now we're going to use it again. 39 39
So in this case, we will scale the image, 40 40
in fact, all of the images we will scale them 41 41
to like, 1.15, 42 42
and this means that the image 43 43
will be instead of 100%, 44 44
it will be 115% big. 45 45
So let's see this in practice. 46 46
So these images have grown. 47 47
They are bigger than they are supposed to be 48 48
and you see they even go out off the browser width. 49 49
It's even bigger than the browser now. 50 50
And we will fix that in a moment 51 51
because we don't want these images to be bigger 52 52
than their container, which is meal-photo. 53 53
So right now, the image just kind of 54 54
overflows its container. 55 55
So what can we do about this? 56 56
There's a nice little property called overflow 57 57
and if we set it to hidden, 58 58
then that overflow will not be visible 59 59
and we just see the part of the image 60 60
which is still inside of the container. 61 61
So let's see. 62 62
Alright, so this is exactly what we want 63 63
and now what we want is to change that transform 64 64
property when we hover the image, right? 65 65
So let's do exactly that. 66 66
And maybe you already see where this is going. 67 67
So what I'm doing now is 68 68
meal-photo image 69 69
and now we can also use this 70 70
hover state for everything. 71 71
This doesn't work only for links 72 72
even if we only use it for links until now, 73 73
but it works really with every element. 74 74
And so what do we want to happen? 75 75
We want this transform 76 76
to go back to normal, right? 77 77
So we scale it to one. 78 78
Let's see if this works and if you get the idea. 79 79
So, so this is what happens. 80 80
Don't worry, we will put an animation there in a moment, 81 81
but this is what happens. 82 82
And you see there is actually, like, 83 83
a while little line down there 84 84
and I actually can't tell you why that happens, 85 85
but I know a good solution to that. 86 86
So instead of scaling it until one, 87 87
I'm just gonna scale it to 1.03 88 88
and this should solve the problem. 89 89
And also I want to, of course, 90 90
animate this transformation 91 91
so what, how can I do it? 92 92
I say 93 93
transition 94 94
and then transform 95 95
and let's say 96 96
hold for seconds 0.5 seconds 97 97
and this should already do the job. 98 98
So this is exactly the same thing 99 99
as we did with our links here, right? 100 100
We defined the transition with the interval 101 101
and then with the hover state, 102 102
we said what would happen. 103 103
So this is what we did right here so let's check it out. 104 104
Okay, this is very nice, right? 105 105
This is really, really cool, don't you think so? 106 106
It's a beautiful effect, 107 107
but we will go even further than this. 108 108
So, as I said in the beginning, 109 109
we will make this image darker 110 110
and then as we hover it, we'll make it lighter 111 111
and that's quite easy to do. 112 112
As we built the header, we learned how to make 113 113
a background image darker, which was our here image, right? 114 114
And now let's try to make this image darker. 115 115
Let me show you how we're going to do that. 116 116
So if we set the opacity, 117 117
yet another CSS property, 118 118
you see, you're using a lot of properties here. 119 119
I mean, I'm covering almost everything 120 120
that you need to know with just this website. 121 121
So opacity 0.7, 122 122
so this is 70%. 123 123
Just to show you, let me show you what this looks like. 124 124
So this is kind of white now and it's white 125 125
because its background is white 126 126
so if we want to make this darker, 127 127
we just put the background 128 128
of this image to black, 129 129
zero zero zero. 130 130
So behind that image, we now have a black container 131 131
and since this image is now opaque, 132 132
it will get darker. 133 133
Very well 134 134
This looks really great, right? 135 135
And now we just have to 136 136
animate 137 137
the opacity here. 138 138
So when we hover, we also want the opacity to change 139 139
back to one, which is 100%, 140 140
and in order to animate it, we put it right here 141 141
so opacity 142 142
opacity 0.5 seconds 143 143
and now we should see both of the things animated. 144 144
And here we go, wow this is really exciting, right? 145 145
This looks so great. 146 146
You see how simple this was? 147 147
So I think the section is also done here. 148 148
Another thing that I noticed 149 149
when I was revisiting this section here 150 150
was that we maybe need some space 151 151
between this paragraph here and these columns. 152 152
So what I'm going to do is 153 153
add some bottom margin to this paragraph. 154 154
So if you remember, it's the long-copy class, 155 155
and I will again 156 156
make a little section here for that 157 157
called features. 158 158
Alright, because 159 159
where is it, so it's this, it's this class, 160 160
but I don't want to make a margin to 161 161
to all long-copy class 162 162
element that we will use throughout the website. 163 163
So again I'm using the long-copy 164 164
inside of the section-features 165 165
so let me just copy this. 166 166
See, this is a very usual practice. 167 167
So section-features and then the long-copy, 168 168
which is inside of that, 169 169
and then we just specify its margin bottom 170 170
and set it to 40 pixels 171 171
and now, 172 172
this looks much better right? 173 173
Okay, probably 40 was a little too much. 174 174
Again, this is, this is really designing 175 175
in the browser and it's really great. 176 176
Yeah, this looks cool now, don't you think so? 177 177
So let me revisit the whole thing. 178 178
We designed this section, 179 179
everything beautiful, 180 180
then we did this section, 181 181
and now we even have this powerful transition stuff. 182 182
Wow, you've learned such a lot so far, 183 183
a lot of CSS properties. 184 184
You should probably take note of them 185 185
or copy them somewhere so that you have 186 186
a whole list of things that you can do with CSS. 187 187
So that's it for now and maybe you want to take a break now 188 188
or you can just join me in the next lecture, 189 189
where we will design our next section. 190 190
So see you there and bye.