CSS grid cards with animated hover effect | HTML/CSS

hey everyone in this tutorial i'll be showing you how to build some responsive cards using css grid we'll be using grid to go from two columns on desktop to one column on tablet and mobile and we'll be changing up the grid template to use a different card design between desktop and mobile and we'll throw on some fancy hover effects just like we did on our last video on flexbox cards sound good let's get into it all right so we have vs code open let me just show you the files and folders we're going to be working with in this project so we have an index.html file it's blank for now and we are also going to be writing our styles in sas so i have that in the app scss folder in this style.scss file and right now i just have some you know global boilerplate styles and we'll be adding to this later on then i have an image folder and this just has the different images we'll be using for our cards and i have a dist folder and this is going to contain the compiled css file that we are compiling using gulp so i'm using gulp and browser sync to compile my frontend files if you don't know how to use that you can check out my gulp and browser sync tutorial that i have and you can also get the the source code for this complete project from my github repository if you want and that is linked down below in the description so let's get started um in our index.html file i'm going to use the emmett shortcut exclamation point and hit enter and that'll automatically paste in some boilerplate html code which is pretty helpful it's a good good time saver so we're going to add a title here and we also want to load our compiled css file so link css and in the href that's going to be dist slash style.css and that's because our sas files get compiled to this dist folder with the css file i think just for testing i'm going to add an h1 tag and just say css grid cards and we just want to make sure that our gulp and browser sync workflow is working so let's load the browser i have to manually reload there okay so it looks like it is storing our css styles and it's loading correctly now the other thing i want to do is i'm going to use a font from google fonts we're using this poppins font so you can go to fonts.google.com to get the code for you know whatever font you want to use select the weights that you're using i'm using 400 which is regular weight and 700 which is bold and then you can just copy the tags there and paste it in your head like that and i think you just want to make sure that you load the font css file before your own css file to make sure that that custom font gets loaded so we're gonna use poppins down in our styles as our default font for all our text okay now everything is saved let's double check our website okay so it does look like the poppins font has loaded next we're going to create the markup for the cards and before we do anything let's check out the design so we can sort of figure out what market we want to add so here i have a screenshot of the finished design of the card if we take a look at it we have the image on the left and then we have text content on the right with the white background then in the content we have the title at top then we have like a description snippet thing and then at the very bottom of the card we have the date of the post as well as a read time so we're going to create our html markup you know for each of these elements so let's go into our code editor again so enter index.html file i'm just going to start creating a market for a single card and then we can worry about putting the cards in the grid later on once we have the individual card design sort of nailed down so since it's a grid of articles or blog posts we want the whole card to be a link so we'll start by creating a a link it doesn't really need an href and then we're going to give it a class of card and then in the card we're going to start creating the different elements so the image on the left is going to be card underscore underscore image and this is using the the bem block element modifier approach for writing your sas styles and then i'm going to put all the other text elements in a sort of parent or wrapper element called card content then in the card content it'll contain card title card let's just call it description card i think date was the next one and then the last one is card read time so we got that so now let's add in the content so the image is going to be an inline style this is just better for when you're integrating with a cms like wordpress so the cms can you know insert whatever image you want right in the markup so we'll say style background image url and this is going to load the images from the image folder so image folder and then cat1.jpeg just to start out so we'll save that then in the title um cat i'm a kitty cat with a dance dance dance if you know the reference um extra extra bonus points to you in the card description we'll add some lorem ipsum text so i'll do one sentence of lorem at some text and we can always add or subtract text if it seems like it's not quite the right size that we want then in card date we'll give it a date so april 1st 2021 and then the read time we'll just say five minute read save that and that is a good place to start for the markup so we haven't really added any styles but let's just see what it looks like in the website okay so markup is here because i made the whole card a link that's why it has the purple the default browser color for link text so let's fix that first before we do anything else so in our style scss file i'll say a and then also a visited color white and we also want to remove that underline so text decoration none go back to our website there we go so it's gone um but we still have the hand cursor when you hover over it because it is link which is what you want okay so now we can start adding the card specific styles so card and i believe the background we want that we'll just set it white for the whole thing even though the image is included in this um and then i do want the card if we look back at the design i'm going to give it some rounded corners just to you know kind of look nice so border radius um and let's say maybe a medium roundedness so 10 pixels um and then i guess the color i want to be dark gray or black and let's see i think that's okay for now so let's see how that looks didn't take the style color let's see what's going on here i gave it a background um but i think maybe it needs to be display blocks i think the anchor links by default are display inline yeah there you go and i'm not sure why this color is not working oh because the color i made it white let's remove that don't want it to be white okay display block let's just do display block for now i think eventually we're gonna make the display grid actually just try display grid by itself see what happens okay that's good so as long as it's not the you know default display in line the properties like background color and such will still take effect and just for the heck of it i'm going to add some global padding to the body to add a little bit more space um just a three rim all the way around there's a little bit of breathing room there okay so let's check and make sure the image is loading first of all so it's not erroring out so that seems to be working but the image isn't showing up because it has no height and that's because the div doesn't have any actual text content it just has a background image so let's give it some height we're going to use display grid for the card so instead of setting height of whatever pixels to the image i think it's a good time to now implement our grid properties so to do that i'm going to go to adobe xd and i just kind of created this mock-up for the purpose of this tutorial but when you're working with css grid at least for me it really helps to have a visual representation of what the grid template meaning the layout of columns and rows is going to be um otherwise i just try to think of it in my head and i can get kind of confused and just it'll just take longer um overall in the end so here we have a layout of both the mobile and desktop versions of the grid so this one up here in the top is the mobile layout where we have the image on top and then the text content below it and then below that we have the desktop layout which is what i showed you in the screenshot where the image is on the left and content is on the right the thing with grid is that your template is basically sort of like a table where you have lines creating rows and columns and each line is numbered starting from the beginning so the pink lines here it starts at one on the very left and then two and then three and the numbers keep going up depending on how many columns you want the reason i want two columns is because of the date and the read time so i'm putting those in separate cells i guess you could say so that's why we need two columns and the two columns go through the entire template then for the rows we're going to have one row for the image one row for the sort of the text content in the card and then the last row is for the kind of meta information about the post so the date and then the read time so that's why we have two columns meaning three lines and we have three rows and we have four lines for that because you have a getting line and end line so you have one more line than the number of columns or rows then for the desktop layout we have a slightly different set of columns and rows so we have three columns for the desktop because we have the image in one column then we have a column for the date and the column for the read time so we have three columns and then that means you have four grid lines for the columns then for the rows we have two rows so we have the top row for the image the regular content and then we just have that second row again for the information the date and the read time and again the lines kind of go through the entire thing so that means that this image for example would take up you know this top big cell and then the bottom one as well and these numbers are going to be super helpful when we start creating the grid template properties because that's how we're going to designate what part of the grid template that each content in the card is going to take up okay so let's start creating these styles for the mobile version of the card so we need to first get grid template columns and sort of designate the column layout and widths then i'll do grid template rows for the rows so for the columns we have two columns as we said and they're going to just be equal width so let's add that in our sas file so this is for the card so we already have display grid to turn on grid and then we'll say grid template columns and we want two columns and since they're the same width we can actually use the repeat function we'll say two columns and they'll each be one fr in width the fr unit is the fractional unit so that means that two columns will be the same width of one fr so essentially each column will be fifty percent then for the grid template rows let's take a look back at the design so we got three rows and the first one is for the image so i'm going to probably give it a specific height maybe something like 300 pixels or so the second row is going to contain the content in the card and this is probably going to be variable since you know each card might have a different length of description so that needs to be variable we'll probably have that be one fr so that it can change and then the last row is for the date and the read time we could set it at a specific pixel height but i think i can set that to auto so it'll just kind of take the height of whatever the content is so let's say grid template rows so we're having three rows we can't use the repeat function since you know they're all different but the first row that's for the image we'll say 300 pixels and then for the content we're going to say one fr so that can be variable and then last one is auto now let's go into our browser i think something oh yeah so i created the template but i haven't assigned the position in the grid to the card elements so one really cool thing in the browser i'm using firefox but i believe you can do the same thing in chrome is that they have a flexbox and grid inspector because we're using the grid inspector since we have grid and you should be able to see that maybe a slightly different color so it'll actually tell you you know what the grid template is and it has the column and row numbers for you so similar to what we had in the design and it looks kind of messed up because we need to actually assign the positions for each of these elements so in the first element which is card image i'll say ampersand underscore underscore image and that's the sas thing where the ampersand takes the parent so the card class and then content and after content we have title description date read time so i'm just going to kind of stub these out here title description um date and read time so the first one image let's look back at the design this element is going to span for the columns from column line one to column line three so we're going to put that in the image so um grid column and this will take two parameters so the first one is going to be the start column line and the end column line will be the second one so it starts at one then you do a forward slash and then you do the where it will end and i believe we said three and then the row image will go from line row line one to two so we'll do the same thing so grid row one forward slash two so we'll save that and then for the content the content will just be the title and the description so i need to change that in my html um yes so the date and return are not going to be in content since they're in their own row so it'll be kind of like this there we go okay so card content is going to go from row two to row three and then from column one to three so it'll span the entire column so going back to our styles for the card content we'll say grid column and it's going from one to three same as the image to go all the way across then for grid row again starting at two since it's right below the image and it'll go to three okay let's just see how this looks in the website okay so the image is on top and the content is on bottom and even though we didn't explicitly set the position in the grid template for the date and the read time it grid is kind of intelligent so if you have more content it'll just kind of follow the existing grid template so that's why you have the date on the last row on the left column and then the read time on the right column i think i'm still going to explicitly um designate it in the styles just to be as clear as possible so let's do that and then we'll go and sort of tweak the uh the css styles so since title and description are in the card content element we don't need to assign them any grid column or grid row positioning so let's go to the date so in the design the date goes from column one to two and then row three to four so grid column one to two grid row three two four and then read time we'll go from column two to three and then row three to four so the row is the same as the date so we'll just kind of copy that and then we'll add grid column three i'm sorry uh i think i did the date one wrong but um the read time is going from column two to three two two three oh that's right sorry i was thinking of i think the desktop design okay so now we'll go to our website it looks like everything is in the right place um so now we can just kind of go in and style the text and also we need to fix this background image thing so first for the image it's repeating which i don't want it to do so let's go to card image and i'm going to say background and i think you can use a shorthand property so i don't want it to repeat so i'll say no repeat and then for background position and size for the position we'll say center center and then we are adding the background size i'll just say cover okay so it's a little um off kilter here i think just because the width is so wide but we're styling for the mobile so let's use that for now then we can figure out the desktop styles later on so this looks actually pretty good um we have the image on top 300 pixels might be a little tall but you know we'll just leave it for now we can always fix it later and then everything's in the right position so let's go ahead and add those text styles so for the title text we'll say font size and we'll make it a bit bigger than the regular text 1.75 rems we want to be bold so font weight will set it at 700 which is what we downloaded from google fonts and then i'm also going to add some space under the title so i'll say margin bottom 0.75 rems okay and then for the description we'll say font size we'll just go with one ram that's 16 pixels and then i think oh yeah we want to add a line height as well so usually for title text or text that's a bit bigger you can have a line height that's closer to one so it's not um you don't want too much space in the titles just for readability but then when you have text that's smaller it's good to add a bit more space so we'll say line height 1.5 um and then for the description i think we'll also add a margin bottom probably the same to add space between these description and then the date and the read time okay so then let's go down to the date and time i think i'm going to make those these same font styles so we're going to add another css selector this is a compound selector um so divided by the comma and these will apply to both the date and the read time so i want to make it a little bit smaller than one ram so maybe 0.9 rams we'll just say line height of one just to keep it the same so we don't have any additional spacing and i think that's good for now so let's see what that looks like cool all right so the title see the description text here and then the date and read time at the bottom now we need to add a little bit of padding i think so let's add some padding to the card content since that's where the title and description are stored so we'll say padding and we'll just say 1.5 rems see what that looks like okay that seems okay card content um and then we want to add similar padding for the date and read time so since these are separate i think i just want to add a padding bottom to both of 1.5 rims and then a padding left for the date of 1.5 rims because it's on the left side and then for read time it'll be padding right 1.5 rooms all right let's get in there let me uncheck the grid inspector just so we can see it without the lines so we got the image we got the title here description stuff i think actually i might remove that the body um padding that i added just to make a little bit more room and we'll add a little bit of spacing later on zero okay so here we have our first card and that looks pretty good um looks like the read needs to be all the way at the right let's turn on grid inspector again to check that out so yeah as you can see the read time is in its own cell but we want it to go to the right so we can do that by aligning let's just test it in the browser first so read time we want to add a style here and since it's a grid child we can say justify self and that controls the justification or horizontal alignment of just that one item so if i say end it'll get positioned to the end default is start which is on the left so i justify self end or the read time there we go didn't copy justify self and [Music] okay so now it looks a lot better let's uncheck the grid inspector again and i'm pretty i'm pretty happy with that i think the spacing looks okay they're spacing all the way around so let's um create the rest of the cards [Music] so i'm just going to take this element and just duplicate it a couple of few times so one two three four five so we'll have six total cards and then we'll just see yeah so we're here now you notice there's no spacing between one card in the next so i'm going to add a gap property to what would be the parent and we actually need to create that parent because i didn't do it yet so all these card elements are going to be stored in a cards maybe let's say section so i want to take all these cards and put them inside the current cards element there we go so now i can add the space between the grid elements so let's add styles for cards and this is also going to be um a grid display grid and i'm going to add a gap property of maybe 0.5 rams between the cards so let's see how that looks okay maybe a little bit more let's try one rim okay i think that's a little better [Music] so you can see this if i select the cards element and i turn on the lines for that it's a little hard to see but this tells you how many rows there are and has that one room of space between each card and the cool thing about this is that it doesn't add space all the way around each of the items but it only adds space between cells in the actual grid template so since on mobile this grid template is one column all the way down for the cards it will only add space between card items that are next to each other so it's not adding any space at the very top of the grid it's not adding any space at the very bottom of the grid either so it's it's pretty smart that way right now i think the gap property is only widely available for grid they're making a gap property for flexbox but it's only i think it only works in firefox so you you know you can use it if you want but it's not widely available okay we did the mobile styles let's make the desktop ones so what this means is that we have our we're doing a mobile first approach so that means we're making our mobile styles our default styles without a media query and then on top of that we will add a media query to target you know tablet and or desktop styles the biggest thing that's going to change is the grid template right the columns in the rows layout so let's add our media query so media min width and let's say 56 ems we're using em is just because it's better for responsiveness and browser support for media queries this is really the only place i use ems otherwise i use rems and i guess that could probably be a video topic in and of itself what units you use for your sizes so 56 ems equals less than 900 pixels so this will be good for anything above a tablet size and up so let's just start off by copying what we have in mobile and we'll adjust the values so going to our desktop designs this is what we're going to use for tablet and desktop so we have four columns i think the first column will have to set a specific width again because it's the image so maybe we'll just try 300 pixels again and then we're going to have two columns of equal width so i'm going to set each of those to one fr so the space will be divided evenly between them so let's do that it's a good template columns um actually i can keep that repeat to 1fr and we'll say 300 pixels so this will create one column 300 pixels followed by two columns of equal width whatever is available after 300 pixels has been given to the first column then for the rows similarly i think we have two rows and i think the first row might be a variable height just because of the description content could change and the second row will probably just set to auto again so let's try that so two rows one fr auto and then since we've changed the tempo we do need to add new grid column grid row values for each of those items again so it does seem kind of like a lot of work um but i think the advantage of grid is that it gives you just a really good level of control over your layout if you need you know specific template of columns and rows okay so for the image the image is going to go from column one to column two and then row one to row three so grid column one to two grid row one two three and then let's copy this the content is gonna go from column two to four and row one two two so two to four and one to two two oops two to four one two two then we have our date and read time let me copy that media query again look back at the design so the time i'm sorry the date will go from column two to three and row two to three [Music] two to three row two two three oops [Music] and then read time read time will go from column three to four and row two to three [Music] three to four two to three okay so hopefully this will look okay in the browser so let's see so let's change our device to maybe an ipad uh landscape okay maybe let's turn off the emulator since we're gonna do desktop styles soon so here we got the mobile styles up until here so this is where that media query hits and we're going to go back and sort of fix this again i'll probably limit the width that a card can be just so it doesn't get too wide like this okay so this is where the sort of tablet slash desktop styles begin and it looks actually pretty good yeah so we don't really need to fix anything so why don't we go in and add the new images and description text and title text just because it's a good idea to see how the design might change with different lengths of content i think that's something that it's good to test out beforehand so you don't figure it out you know when you push something to your production server and then have to go back and fix things okay so let's do the images first so two cat three cat four five six let's make this title a bit different [Music] meow meow meow i'll just leave that okay so now title is different i will change the description text as well let's make this a bit longer so two sentences this might be really long but we'll just see how it looks i'll try one sentence and then i'll even delete some of that to make it even shorter [Music] and we'll do another short one alarm one sentence delete a bunch of stuff [Music] and then i'll try two again but we'll delete a little bit so it's not super super long and the last one we'll just do one [Music] okay see how that looks okay so now we can see how it looks with um different content you can see the cards get taller when there's more description okay so you know overall things look okay so the next thing we want to do is i actually for desktop widths you know i don't want the card to get super super long so at a certain width i want there to be two cards um in the grid so let's decide where we want to put that break point so here is where we started getting the card you know i might actually make this smaller let's change that break point [Music] instead of 56 and 56 [Music] ems x 16 which is the um base font size it's about 900 pixels so let's make it smaller i think most tablets are let's see here ipad is 1024 by 768. so 768 width so we should maybe do 800 for tablet to target kind of tablet styles so 800 times i'm sorry divided by 16 is 50 rems so i'm just going to replace all the instances here um with what did i say 50 rems yeah 50 rams 50 ems i should say replace all okay check back on the site so now it is 768 width [Music] and here's where it hits but you know honestly i think anything above maybe around here is good so this is 484 so let's make that actually a 500 for the break point 500 divided by 16 is 31.25 [Music] so we'll replace that with 31.25 ems now it might seem really arbitrary that i am setting the breakpoint for the styles at just kind of what i'm eyeballing it but i think that's actually a little bit better that's a little might maybe want to make the width smaller there but i think it's actually it's actually a better approach because you can set your break points based on the design so like where the design starts breaking or looking weird that's where you can put your break point you know for each little module or whatever let's try to polish this a little bit so this looks fine at the mobile width then as it gets bigger right here it's a bit strange right so i think we want to make that image narrower so let's do a little bit of a test so right now it is 300 pixels wide but let's try maybe 150 see that's way better let's try 160. okay it's going to 160 for the um image width and that is controlled in the grid template columns so we'll say 1 60 i think and then we'll probably have to make the image a bit wider for you know larger desktop sizes let's just see how that looks so here's the mobile version and it gets a little wider there we go now we have to figure out where we want this image to be you know why you know wider than 150 or 160 rather this looks fine here so maybe around here or so is where we can do that so 700. [Music] maybe what's this 734. so let's see maybe 750 is when we make the image a bit wider maybe 800. so 800 divided by 16 is 50. i think that's that the original one that we did and we can just add it underneath so i'm in with 50 ems and we'll make the grid template column 300. there we go all right see how that looks okay so this is the desktop style and then as we get narrower the image gets narrower so this looks really good and then slowly now we're down at the mobile styles so it looks pretty good so i'm pretty happy with that yeah so now let's figure out where we want the cards to go you know two up so it starts looking long like maybe around here or so yeah around here is when it's a bit long that is 9.54 so let's say above maybe 900 so where is 900 this is about 904 maybe 9.50 yeah we'll do 950. and that's when we'll make the cards grid um two columns so 950 divided by 16 is 59. we'll just say 59. um and that is controlled in the cards so right now it's just display grid so it sort of defaults to just one column so i think i can say 59 ems and then i'll say grid template column and i want two columns so i'll use the repeat thing again so two comma one fr since we're just going to divide the space between them okay [Music] that looks a bit funny right so this looks okay it starts looking a little like the image is a bit too wide around here around 1268 let's go down a bit narrower yeah it looks not great so here's where it is where it breaks so probably the same break point where it goes the two columns you want to change the image with again so we'll copy this media query and we'll go down to the card um and that was at 59. let's just do it here and we're changing the grade template columns to be 160 again [Music] okay so that looks okay yeah that looks okay it seems a little bit squished but i think that you know as it gets longer it's okay let's see what actually would show up for your ipad so with your ipad this looks fine let's see landscape landscape is where it looks a bit weird but i think it's it's still acceptable in my opinion okay it looks pretty good now one thing i am going to do is i personally like to limit the width of elements for really large screens just because you know if this gets really long it'll start looking a bit weird again so this is usually a good idea to sort of keep things in a container so let's see how long these cards are right now [Music] so this is 670. so maybe i'll try limiting the width of the card to maybe max we'll put in 670 so you can see it in the browser so what i want to do so where do i want to do that i think um i think i can do it for the card element itself let's just see if that works max width 670 pixels [Music] okay so let's see when we get really wide okay so you can see that is working however that's not great because it's creating the gap so i think that's not the right place to do it so i think i want to do the max with on the container card and we'll just do 670 times two [Music] so in the cards container so max width and that's gonna be 670 times two so thirteen forty [Music] okay there we go so that looks a little bit better because then the exercise is just added on the end here and what you can also do if you want this depends on the design is maybe you want to center that so i will also do margin auto zero auto and that should center the grid on the page there we go so any extra space will be equally divided if it gets really wide and then it's just normally responsive like that let's also add some padding to the cards container since we removed it from the body so padding just one rim all the way around there we go so now let me turn off the uh [Music] grid inspector okay so now there's some space all the way around [Music] okay that looks pretty good now since these are links the whole thing is linkable the next thing we want to do is add a hover state to the card and what i'm going to do is i'm going to create a gray overlay that will go over the entire card and then a read more button in the middle and this is one really cool thing you can do with grid usually to do something like that you'd have to use position absolute for the overlay but we're going to use grid instead because with the power of the grid template you can actually completely overlap elements in the grid so [Music] let's do it and i guess i should have done this before i copied everything but we'll add another element this will be called div i'm sorry this will be called card overlay and it's just gonna be an empty thing like that it's gonna have to manually copy it in each card [Music] there we go okay so card overlay and then we'll add the style down here too overlay now we want to place this overlay in the grid template so first just so we can see it i'll say background rgba and i'll say zero zero zero which is black and then we'll give it um an opacity 0.5 [Music] so then hopefully it'll show up after we position it in the grid template so going back to our um grid thing so we we really only need this hover state for desktop because there's no hover state on mobile really so for grid columns the overlay is going to go all the way to from the beginning to the end so columns will be one and four rows will be one and three so let's add that one and four one and three and i think i'm only going to set this to be visible on this media query so i think what i'll do is i'll add all these grid styles inside the media query so this will only really take effect here and then i'll just do display none just for good measure display block or actually we want to use opacity we'll set opacity to zero to begin with but we'll do that later let's just kind of get this working okay so let's go back to our browser and let's see if this works um displays none [Music] why is it displayed on right now oh um yeah display block there we go okay [Music] so it's not it is display block um grid column one 4 why is that not working [Music] so the grid column is working oh i did grid column and grid row that's why there we go see typos really mess you up okay looks like the overlay is now loading which is great so we can turn off the grid inspector so i want it to go over the whole card um it looks like it is not on top of the image because it's a znx is not set and because the image because the overlay comes before the image in the markup order means the image is going to be on top automatically so [Music] we can fix that either by moving the overlay after everything so it's on top but i'm kind of lazy and i already put it here and i personally like putting overlays first so we can fix that by doing um position i guess we'll just do it for the desktop stuff position relative so this will set the position since the image doesn't have its position set explicitly this should put the overlay over it yeah there we go so now that overlay's working and now we can also add the content so i think i'm going to do a span read more and i'll need to um replace the other ones too let's just fix it in the first card so card overlay in the span is going to say read more so we'll add those styles here and this is going to be i'll say display inline block this is so i can add different properties like padding and such to it so i want to say read more then i also want it to have like a square um it'll be like a square button type thing so we'll say um border 2 pixels solid and it'll be white and the color will also be white okay and let's just add a little padding just to see uh one room and maybe three rims i'm basically just creating a square button here okay so you can see the read more buttons visible on that first one i'm also going to do uppercase so text transform uppercase let's make the font bold make it stand out a little bit more okay so i think that's okay um now i want this in the center so we're going to use grid again um i guess we could use flexbox too since we've been using a lot of grids so let's just do flexbox display flex and then justify content center align item center now it's in the middle actually let's let's do let's just do grid all the way down i think for grid it's item center there we go so see it accomplishes the same thing so you know there's some things you can do with either flexbox or grid whatever your preference is i think also it's a little bit too transparent so i'm going to add a little darker gray background to that um in the button itself plus do background rgba zero zero zero once we i want to be darker than the um overlays let's do 0.75 see how that looks okay maybe a little too much let's try a 0.5 okay so 0.5 on the overlay then another 0.5 on the button so it'll go like that okay so this is the hover state so i'm going to use the opacity property so it'll only get displayed when you hover over a card so by default i'm going to make it opacity zero and if we're doing a hover state you usually want to do a sort of animated transition so we'll say we'll transition the opacity property say the timing of the animation will be 200 milliseconds and ease in out is my sort of default so by default the overlay and the button is going to be opacity 0. so then we need to add a hover state and i think i can do it here by doing card hover and then the ampersand to select the overlay i think this is the right syntax for that but we'll test that and see okay oh that looks good but where's the button okay buttons only on that first one i forgot so that's working you could also do the hover state in the card selector itself so i could have done you know under the card selector hover and then card overlay opacity one that accomplishes the same thing so you can do either it really depends on your preference um i just did it this time so i could keep because this is the opacity for the overlay itself so i want it to you know be under the overlay selector so it's card hover and then the ampersand will get you um i guess the parent selector which is the card overlay now i need to go back into the markup and then copy this [Music] into each overlay i'll just replace the whole thing [Music] okay [Music] all right so now we got look at those hover states okay and we'll do one more test just to check all the different widths uh actually let's use the emulator so we got the ipad landscape ipad portrait and then we'll do iphone uh portrait and landscape [Music] okay so that looks pretty good and that's it for building some responsive cards using css grid let me know down in the comments what you thought of these cards as well as any suggestions you might have for a future video on different ui elements that we can build and as always thanks for watching and keep on coding [Music] you

Channel: Coder Coder

Views: 20,905

Keywords: web development, html, css, learntocode

Id: qYmxFbl0qa0

Length: 52min 51sec (3171 seconds)

Published: Tue Dec 08 2020