hi everyone welcome back to our channel hope you guys are well so
today in this tutorial i am going to show you how you guys can make this amazing
layered card hover using just html and css here you can see that we have three cards and
and a white border and if we now hover on this card you can see that we have some text so this
effect is looking so good and you guys can use this effect in your website and it will looks good
so in a few minutes i will show you how you guys can make this effect using just streaming css
and before we start if you guys are new in my channel then please please subscribe my channel
like this video and press the bell icon for the future video so let's go to our project file
and here you can see that we have three images which you and i am going to using and here is the
index.html file and stylesheet now first we will open index.html file so go to english.html file
and here first you have to create a basic html structure link the css file and they give a title
and after here in our website you can see that these three cards in actually in one box so
that's why first we have to create a box and inside this box i will put these three images
these three cards so for doing this first we have to create a diff class and the class name
will be box and inside this box i will create our card so that's why i create another div tag and
give a class name of this tag will be card that's it and inside this card first i will create our
image so that's why i will import our image in a div text so that's why create another div tag
and the class name will be image box that's it and inside this image i have to create an image
tag so that we can put our image and here we have to put the image file name so my first image file
name is one dot jpg that's it and underneath this image file we have to create a details
div so that we can put the name and profession in this here so that's why here another diff tag and
the class name will be details the set and inside these details we have to create a s to tag
and here you can write your name or or anything you want so for now i will put someone famous
that's it and here you can see that in our website so here is the somewhat mouse and here we have our
profession so here you can see that this director word is actually lighter than this one so we have
to put this word in a different aspen text so that's why we have to create a s pen tag
before we have to break our line so that's why you have to create a break tag and here we have to
create a spam tag and inside this expand tag we have to write director that's it so here you can
see that we have now our first card now i need two more so so that's why i will just copy this
card first cut from here and paste it here that's it so this is our cartoon and this is our card
tree so now save now go to our website and refresh so here you can see that we have our image then
name and then profession so there is a c card but you can see that these three cards is now in one
column but i want this in one row so that's why we have to go to a style sheet and here
first you have to build your basic style so now here first i will give a height so
that's why mean height will be 100 ph and i want everything in center so that's why display will be
flexed and justify content will be center and align items will be also center okay and now here
i will give a background color so my background color will be this one so now save go over website
and refresh so here you can see that i have now in everything center and here is our background color
so in our website you can see that actually these images are now in one row actually but here it
is in one column i want everything in one row so for doing this here you can see that we have our
box class and inside this box class we have our three cards so we have to
target our box class so copy this box class from here and paste it here now here i will
using grid so that's why display will be grid and grid template columns
that's it and here i want to repeat and here in this repeat i want to take each card 350 pixel
this one will take 350 pixels with this one also taking 350 pixel and this one is also taking 350
pixel so that's why it will be taking 350 pixel and uh each one will take one frame okay and here
i will give another parameter which is out of it because i want everything to be in automatic and
i will put this values in one function and it will be mean max that's it
so so here you can see that i used repeats so that each one is taking one frame and each one is
taking 350 pixel and i use autofix okay and here in our website i want to take a width for all of
this so that's why we have to define a width so which will be 1200 pixel and i will give margin
and from top and bottom i will give zero and from left and right i want automatic so that's why auto
that's it now save go our website and refresh so here you can see that now we have in one row
so our box is done now here in our website i want to fix this weight and height for each
one of this card so for doing this go our website and just copy this card class from here and paste
it here here now we have to give a position so i will give position will be relative and i want to
give a width of 300 pixel and the height will be 350 pixel and i will give a background and
background color will be white and margin will be zero from top and bottom and auto from left
and right and i will give a border radius and it will be 4 pixel and i will give a box shadow
and the first one will be 0 pixel and the second one will be 2 pixel and our blur will be 10 pixel
and i will give a rgba value so that's why rgba and here it will be 0 0 0 and 0.2 that's it
now save go website and refresh now here in our website now i will fix the image size here so
that's why i go to our code editor and here first copy this card class from here and paste it here
now we have to grab another class which is image box from here copy this class from here and
paste it here and i will give a position and this will be absolute and if you go our website
here you can see that we have actually a border so i will create this border here
also so for doing this i will give border from top it will be 10 pixel so copy this from here
and past 4 time this will be top and this will be bottom and this will be left and
this will be right that's it and here i will give a background color so background color will be
this one now save and go our website and refresh so here you can see that now we have border
so now we have to give a width and height of these images so for doing this copy this
image and the cut class from here and paste it here and here we have to target our image
that's it and here i will give a position absolute and from top it will be taking 0 pixel
and from left it will be also taking 0 and i will give a width of 100 and a height of 100 and i will
give object fit will be cover that's it now save our website and refresh so now here you can see
that we have our image in a specific return height and we have also some border so now here you can
see that we have our text behind this image so now we have to fix this so go to our text editor
so for doing this copy this card class from here and
paste it here now we have to take our details class from here and paste it here
now i just copy everything from here and
paste it here here our position is absolute and from top i don't want these text to top
i want these tags to in the bottom so that's why top i don't want this top
and from bottom i want 10 pixel and from left i want 10 pixel and from right i 10 pixel also and
here i will give a height of 60 pixel and i want everything in the center so that's why text a line
will be center now save go our website and refresh so here you can see that now we have our text here
and everything in center now we have to style this name and our profession so for doing this
copy this class from here paste it here now we have to target our s2 so here you have
to write s2 that's it and i will give a font size 20 pixel and the font width will be 600
and i will give a font color this one and i want everything in uppercase every letter in uppercase
so that's why text transform will be uppercase that's it now save go our website and refresh
so here you can see that now we have our phone color and the phone width so now we have to design
our this profession so for doing this copy this line from here and paste it here now we have to
target our aspen tag so copy this aspen tag from here and paste it here that's it
now i will give a font weight of 500 and the font size will be 16 pixel
and i will give a color font color will be this one now save and drag our website and refresh
so here you can see that now we have our profession title here
now here i will give some express from the top for from the top so that's why go to our creator
and here you have to just type margin top will be 5 pixel and here in s2 i will give margin
0 and padding also 0 and go to our website and here you can see that actually how many hover
on this image we have two layers behind this image so now we have to create these two layers
so that's why go to our text editor and here card
and here we have to create two pseudo class one is actually before and second one is
after so for the last layer we have to create before and for the second layer we have to create
after that's it and here we have to give a content and it will be blank actually and then
i'll give a position it will be absolute and from top it will be taking 0 and then from left it will
be taking also 0 and i will give a width of 100 percent and height will be also 100 and
border radius will be 4 pixel and background color will be white and i want everything in the
behind of this image so that's why it will be that index minus 1 now save and go our website and
refresh if we now refresh you can't see anything because we have to create our hover effect here
first so that's why so for doing this first we have to so here you can see that in our website
actually we are hovering on the card not on the image so that's why card will be over
that's it and the first one will be after so when i hover on this card i will take hour after so
that's why after and i want to transform rotate so that's why transform and rotate will be 10 degree
and i will give a box shadow and they're from
zero and a 2 pixel and a 20 pixel and i will give rgb a color and this one actually will be
0 0 0 and 0.2 that's it so here creating after we have to create for the before also so that's
why copy this class from here and paste it here and this will be actually before that's it and
here you can see that our after is rotated in 10 degree but our b4 will be rotating 20 degree
now save and go our website and refresh so here you can see that we have actually two
card behind this but we have to give a background color and here we gave background color actually
gray color but it will be actually white color so that's why save and refresh and
so now here you can see that we have our over effect but it is not smooth so that's why we
have to give transition so transition will be 0.5 second now save and go our website and refresh
so now here here you can see that this cover effect is looking good
now we have to fix this images and this text and here you can see that when you hover on this
image this image is actually creating some space from the bottom so i want that also so for doing
this just copy this card and hover and here we have to image box and here it will be image box
so that's it now if we hover on this card our image will create some space in the bottom so
that's why it will be bottom 80 pixel there say now save and go our website and refresh so here
you can see that we have some space from bottom but it is not smooth so that's why we have to
give a transition here so transition will be 0.5 second that's it now save go over site and refresh
so now here you can see that we have our hover effect and it is looking good but here you can
see that if we hover on this image this image is creating some space from the bottom actually
this image is on the top of this text so we have to get it here also i want this image on the top
of this text so that's why we have to go our image box here and here we have to just type that index
and it will be one so save go our website and refresh so here you can see that now our text
is behind this image and this image is looking good now we have to change the image so that's why
i go to html file and here you can see that this will be number two and this will be number three
and this will be actually producer and this will be actor now save our website and refresh so yeah
now here you can see that we have three different images and we have our hover effect working
so yeah i think that's it and this over effect is looking good
so i hope you guys enjoyed this tutorial and if you guys really enjoyed this tutorial then please
please subscribe my channel like this video and press the bell icon for the future videos
and see you guys in our next tutorial