CSS Responsive Card & Hover Effects with Flexbox | HTML CSS3 Tutorials 2021

hey guys welcome back to my channel in this video we are going to build these responsive cards by using css flexbox and you will also learn how to add a nice hover effect to make it look much better so now if you are ready let's get started okay so let's start building our template first we're gonna need a section and this will be our container for later and inside this section we're gonna have three cards each card will include an image a title and some text let's multiply them [Music] now currently the cards are placed each in a single row but we would like to place them side by side and for that we should put them inside a flex container so let's do that i'm going to add a container class and assign a display flex property and once we save it and now as we see the cards are placed side by side let me also add some additional css rules and let's give our body a dark background color okay now the next thing we will do is to create our cards with css and to do that i would like to give some background color at first [Music] and let's increase their size with some width and height properties let's also give some more space to our layout the next thing i would like to do is to give some space between these cards and center them in the middle of the page and to do that we need to use justify content center and this will center the cards in the middle of the layout now i would like to give some space between the cards so let's add some margin of let's say 10 pixels let's also increase the width a little bit more okay looks much better and now we can start styling the inside of the cards let's define our card image class and here inside for now i'm going to give a background color as a placeholder let's make it some aqua let's give some height and let's give some space between the title and the images so i'm going to add some margin bottom let's say 15 pixels now we can add our images to the light blue space and i'm gonna do that with the background image property so let's define here another class for each image let's say car one and this will have a background image the url and here you need to write the path of where your image exists let's copy this and pass this here okay now as you see the image is there we also need to position it in the right way so i'm going to type a special property called background size and it should have the color value so the image is now there let's give a bit more of height okay and do the same for our other images and now our images are dash let's also give a little bit of border radius to the card you can do that however you like but i find it cool when i add some radius to the borders let's make it 15 pixels now looks much better but as you see it didn't work for the images so we also need to add a radius property to our background images okay now looks good now we can continue with styling the text and adding some content inside our cards let me also remove the background colors we don't need it anymore okay let's change this with some dummy text and i forgot to add a button here so let's add a button we can do this with an anchor tag and this anchor tag and once the user clicks on the button it should make a redirection so let's say read more and now we can style inside of our cards let's add some padding to our titles and also to the dummy text but the height is now not enough so let's remove it so it can resize itself automatically okay now the next thing to do is to style the button first of all i would like to give a background color of black and let's change the text color to white okay let's add some padding for the text we'll have some space like 15 to 20. now the thing is that anchor tags are inline level elements but we would like to center them so we can change this as a display block okay now they are block labeled let's also center the text with text align center if you like you can keep it this way but i would like to make the button a bit smaller so i'm going to give some margin okay now looks much better before adding the hover animation i would like to see how they look in the mobile view okay we have built our cards so far only for the desktop view or for the larger screens view but there's also smaller screens like tablets or or mobile wheels and let's toggle the view for mobile and let's see how it looks and as we see this layout looks broken for mobile devices flexbox is actually very responsive friendly and we can fix this with a single line with a single chord that flexbox provides but before showing that i would like to show you something else when i start dragging this and making our screen smaller then what we see is that the cards are resizing themselves and they try to fit in a smaller in a much smaller layout this is a very nice feature of flexbox and it gives us much flexibility even if i haven't developed any code for responsive design but after some point even if our layout is much more flexible it won't be enough to fit in the screen so we can fix this easily by using a flexbox feature so there is a property called flex wrap that flexbox provides and by default it is no gap which means that it does not wrap the layout and the children so when i make the screen smaller they cannot go anywhere but we can change this to wrap and when i do that our third card is moved under of the others because there is not enough space so let's go back to the beginning now i am making the screen smaller and as we see when there is not enough space it quickly moves under of it and if i continue doing this then the second card will also go under of the first one so as you see using flexbox is really beneficial also for responsive design and now as the next step let's add our nice hover animation effect okay so we want to add some power effect then we hover on on the cards with mouse so let's create here a hover rule inside here you can add in rules you like but i'm just going to make a quick example so let's add for example a background course as we see now when i hover with mouse the background color changes but we need to improve that let's also change the text color to white and give a pointer cursor ok looks much better if you like you can also add a transform rule and to make the cards a little bit larger than its original size something like this so when we hover then the cards get a little bit larger we can also give a little transition effect so this means that every rule here will apply in a light transition way in one second after we hover so let's see so when i hover it again we see that the rules apply slower than its original size and then its original speed and we can do that with the transition property it really adds a nice effect let's also clear this underline text from from the bottom so it looks much better so if you guys want to learn more about flexbox check also the playlist for other videos as well and if you find this video helpful please hit the like button and see you guys in the next video

Channel: Cem Eygi Media

Views: 99,183

Keywords: responsive card css, css responsive card hover effects, responsive card design html css, css hover effects animation, responsive card html css, flexbox responsive cards, css flexbox responsive cards, flexbox tutorials, css flexbox tutorials, css cards flexbox, responsive cards flexbox, CSS Responsive Card Hover Effects with Flexbox

Id: qXRYMdvq_Dc

Length: 9min 39sec (579 seconds)

Published: Sun Jan 24 2021