CSS Card Hover Animation | HTML and CSS

hello everyone and welcome to my YouTube channel today we are going to design these three cards section so normally they will show only an image and a heading tag when we hover over a card it will show the details and alar more button so let's get started okay so to start Let's uh first of all we have two uh files one is the HTML file and another one is the CSS file inside the HTML file I have linked the CSS file and inside the CSS file I have given some styling basic styling so now to start let's make a section and give it a class container now this section will contain the whole uh layout so inside that container we will make another section and give it a class of uh cards section okay now inside this section will contain all the cards so let's make the cards here give it a clause of individual cards inside that uh we will have an image so let's add the image after the image we will have a heading so let's add the heading after that we will have another division which will show only on how so let's add that Division and give it a class uh show how okay now inside the division we will have a paragraph So let's add a paragraph actually let's add 20 characters now after that we will have a button which will learn more okay so let's see how it looks okay now let's start The Styling so first of all we will style the container for which we will give it properties let's give it a width of 100 width a height of 100 height and a background uh gradient which will be on 45° and the colors will be 0 0 f a 0 FF a and the other color uh will be 7 B 0 0 f how let's see how that looks now we cannot see the gradient because the image is taking the whole place so let's give the image some properties so let's give it a width of 200 pixels and height 100 pixels and we see the gradient here okay now we want the whole content to be centered both horizontally and vertically so let's add a display of Lex to the container and give it a property of justify uh let's give it a property of align items Center so the items will be align centered uh will be centered vertically now to align items uh to Center item horizontally to let's add justify content center now you can see the whole content is Center both horizontally and vertically so after that let's design the cards section let's see if we have given it proper name so let's get a display of flex you want the flex R and we want the GI inside these cards to be 20 p now let's duplicate the cards you can see all the cards are so after that let's design the individual cards so let's give it a background color which should be white and a width should have a width of 340 pixels and a height let not give it a height as it should be a let's add a padding of 20 pixels and let's align the items now it's coming along now the image should be a bit more wide so let's give it 300 p and the height should be let's say 200 so far it looks good now after that let's add some spaces to the H2 take so let's add margin of top and bottom of 10 pixels and and right zero that let's add some margin to the paragraph so we will add margin bottom okay now let's now let's design the button now it's good to give these H2 imag p a proper class in design these glasses but our design doesn't have any other H2 or images TT so I'm just going with the image and HQ T directly without giving them any other classes so with the button let's design the button let's give it a pading of 10 pixels give it a top and bottom 10 pixels and left and right of 30 see how it looks after that let's uh give it a f size of 18 pixels uh uh let's remove the Border okay and give it a background color Also let's give it a color white and give it a b radius let the button design how it should be b r okay now the whole elements are designed properly let's about now we want this P tag and the button not show so let's do that so let's copy this last name and let's design this so we want the visibility to be hidden and we want the height to be zero ini okay and when we H the individual card when we H over it we want the show or the set its visibility to visible and it height to 15 now if you see we one uh one card all the cards grows so we don't want that so for that let's add uh align Center property to the individual c okay now let's add some animation a transition okay so let's add a transition on height we should hit the transition here so let's add the transition on height and give it a time up let's say one second and we want it to be easy enough okay now the visibility we also want to add the transition on visibility so we want it to be 1 second and we also want also we want one second now actually the visibility is not getting this so let's uh add another property which is opacity so let's give it a opacity of zero here and opacity of one here now let's apply the transition on now they are showing properly now let's copy these so let's see how that works so far it is looking good now all you have to do is change the content here so let's change this image and mountains and let's M Also let's change this image and let's add each here now our cards are ready when we H over the card the detail and Lear more Lear more button so that's it for today the Cs are working properly so that's it for today and see you in the next video

Channel: code with aymd

Views: 5

Keywords: css card hover animation, css card hover effects, css card design, card design html css, card section html css, how to create cards in html and css, css hover effects

Id: b8G3n0N8P9Q

Length: 13min 18sec (798 seconds)

Published: Fri Jul 12 2024