That we have the text displayed over here so when we click on this image we'll be taken to the our services page in the same way we have the hover effect for.
The other images as well and this is also responsive so if i decrease the width of the screen we can see that now we have two images in a row and if i decrease the width of.
The screen even more we have just one image in a row so this is what we're gonna design in this video using html and css so let's get started.
right here i have created this folder called image links and i just opened it with vs code and i also have a folder called images over here and in that we.
Have the three images which we're gonna use in our design so let's start by creating an html file so here i'll just create a new file and i'll just name it index.html.
Just press exclamation and press tab and you'll have this basic html5 code and let's link our css file over here and i'll just type style.css over here in the href.
All right let's start by creating a container division so let's create a division of the class of image links container now in this we need to have the images.
But we need to have the images as links so we have to create an anchor tag so let's create an anchor tag over here and for the htf you can just type the link of the page for now i'm just gonna type.
Hash so if you are using this link for the about page then you can just add the link of your about page over here in place of this hash right now here in the.
Anchor tag i'll just create an img tag and in the src i'll just type images and we have three images over here i'll just select the first image and then we also need to have this.
Text over here Wesdigital
So for the text i'll just create an s3 so here let's type s3 and the first text we need to have is our services so just type our services over here.And this is the first link so let's copy this and let's paste it two more times you can add any number of images that you want over here and for the second.
Link i'll just type 2.jpg and for the third one i'll just type 3.jpg because we have these images inside this images folder right for the second text we need to.
Have source code so here let's type source code and for the third one we need to have our team you can go ahead and change the images.
And the text to whatever you want and just add the link of the page over here so in this case we can just add the link of the our themes page over here in place of this hash all right that's it.
With the html now let's open this in our browser so i have this extension called live server installed in vs code and once you install that you can just right click over here in the html and.
Click on open with live server and here we can see that the html is displayed over here right now let's style this using css so let's go back to our vs code and let's.
Go to style.css and the first thing we will do is style the image links container so i'll just type dot image links container and let's set a max width of 900 pixels.
And we will bring it to the center so i'll just type margin 0 or let's tap 32 pixels for top and bottom and auto for left and right and.
Let's go back to our chrome
And we can see that we still have a lot of width for the images so let's style the images so here i'll just type.Image links container img and let's set the width of the images to 100 and now we can see we have 100 width for the image and we'll also set the object.
Fit to cover so that the image has the correct aspect ratio right now the next thing we need to do is we need to have three images in a row so here for the image links container.
Let's make it a display of grid and let's type grid template columns and we will have three columns over here so i'll just have one fr one 1fr and 1fr so this will.
Divide the image links container into three different equal parts and we'll also have a gap of 8 pixels in between all the images so let's go back to chrome and here we.
Can see we have these three images displayed over here and we'll also set the height of the images to 100 percent so here i'll just type 100.
And now we can see everything looks alright right now let's style these headings so the headings are also inside the anchor tag so that's how we can see we have these underlines over here.
So here just type image links container a for the anchor tag and let's set text decoration to none and now we can see we don't have the underlines now the next thing we need to.
Do is we need to position these headings over here at the top so for that we have to set the position of the anchor tags to relative so that these headings will be.
Positioned relative to these anchor tags so here for the anchor tag i'll just type position and let's set it to relative and now let's target the s3.
Which is the heading so here i'll just type image links container s3 and let's set the position to absolute.
And we'll set the top position to zero and now we can see that the headings are at the top we'll also remove the margins so let's stop margin 0.
And let's add a background color and we'll set the background color to dark gray and let's set the color of the text to white.
And we'll also change the font to roboto so just a font family roboto and sanserif and let's set the width to 100 percent so i'll start with 100.
And we'll also text align it to the center so i'll just type text align center and let's set the font size to 16 pixels and we'll also add some padding so i'll.
Just have padding and let's set the padding to 8 pixels top and bottom and 32 pixels left and right and now we can see when we add the padding the heading has a higher width.
Than expected so for that we have to add a line of code called box sizing and set it to border box and now we can see we have the correct.
Width right now the next thing we need to do is add the hover effect so let's go back and uh let's type image links container a colon hover.
And here we'll just type s3 so when you hover over the anchor tag we need to add the horror effect to the s3 so when we have the horror effect i'll just set the font size to.
24 pixels and i'll also set the padding to 32 pixels top and bottom and left and right and let's set the top position to 50 so.
That it is in the center and when we add the top position to 50 it will start from the center so we have to move it 50 of itself to the top so let's tap transform.
Translate y negative 50 and let's set the background color to white and color the text to dark gray and we'll also add a box shadow so i'll.
Just a box shadow and we'll add the values as 0 4 pixels 40 pixels negative 2 pixels rgba 0 0 0 and 0.4 and we'll also have a smooth transition.
Between the hover effects so i'll just type transition of all to 400 milliseconds is right now let's go back to our chrome and let's hover over these images.
And here we can see we have the horror effect working all right so everything is looking all right right now let's add responsiveness so when we have a width of less than 800.
Pixels we will have just two images displayed in a row so let's decrease the width a little bit and here i'll just add a media query so just.
Type at media and let's type max width of 800 pixels so when the width is less than 800 pixels i'll just set the grid template columns to 1fr 1fr.
So let's type image links container grid template columns 1fr 1fr and now we can see we just have two images in a row.
I will also add one more media query for smartphones so let me just decrease the width a little bit more and let's add one more media query over.