Responsive Image Gallery Using CSS Grid | HTML And CSS

hey what's going on everybody in this video we are going to create a responsive image gallery using html and css we're going to be using css grid for the layout we're also going to be adding a fun little animated image hover effect as you can see on the screen here i'm going to go ahead and open up the developer tools and going to hit this device toolbar here i have it set in this responsive tab here so i'm going to go ahead and decrease the screen size and as we do we will have a change in the layout for medium sized devices and as we continue to decrease the size it will go to a single column layout for the smallest device sizes so that's pretty much it i'm going to have a link in the description to the code if you want to check it out it'll be on codepen and let's get started so just jumping into it here i have a folder i created just named image gallery and we have an index and a styles css index.html i'm going to go ahead and close that now if we look inside of our file folders here i have these uh index html and the css open here go and close that and that's all we're going to need to open and over here i have the image gallery pulled up which is just uh nothing going on yet so let's go ahead and start coding out the html and then we'll jump into some css so [Music] i'm going to give a div class of wrapper this is going to keep the page centered and give it some padding so it's not touching the edge of the browser and let's go ahead and let's give it a space let's give it a let's give it another div and this div is going to have a class of gallery i'm going to be using bem for this if you're not familiar with bam i recommend just go searching it on google or youtube if not you can just follow along how i'm typing it out uh pretty simple to understand and once you start typing in it it's very um very useful so it might look a little strange but hopefully this doesn't throw you guys off of the tutorial here i'm just going to say div class gallery item and each one of these is going to have a modifier we're going to call this gallery item one you know i'm gonna back up a little bit hopefully uh actually i don't i just don't want to make this code too big for you guys or too small for uh whatever device you're viewing on but it's also i want to make sure you guys can see this appropriately inside of here we're going to give a we're going to create a link and we're just going to set a hash or a pound sign or whatever has the value there and we're going to give this a class of gallery link inside of here we are going to add a [Music] image now the images i have the sources pulled off the screen here so i will uh enter those here in just a second so let's just go ahead and just add that in there and the last thing we're going to need we have those overlays so we're going to give it a div class gallery overlay and inside of those we're going to just say span text text so we're just going to next copy those and we're going to paste this five more times so we should have six of these now and if we scroll over we should name these appropriately so one two three four five now i'm going to quickly paste in these image sources that we need here so oh one last thing actually i am going to give these images a let's go ahead and just select all of these images there we go i think that's all of them right yep i'm using just uh visual studio code you can click ctrl d and you can select um the whatever you have highlighted all instances of that or the next instance um class is equal to gallery image cool so that's what we're going to call that now we have that class of gallery image here now we're going to go ahead and paste in those source image sources that i was discussing so there we go there's one and i'm getting these images from unsplash you can go ahead and fill these with whatever images you want or you could also just cruise over to the code pin that i put in the description and grab the same images that i have here up to you most images should work um within these because of the way that they're going to be positioned inside of the parent container here so so now that we got all those images let's go ahead and hit a refresh make sure everything's showing up cool so we have that panda we have a lion we have elephant we have this big old picture of a buck um we have a or yeah we have a little fox and we have some horses and that is good there so let's go ahead and continue on let's go back to the top let's go ahead and add the appropriate text for each ones of these so for this first one we're just going to say eating so that's going to be all the html markup that we need so let's go ahead and jump into the styles now uh at the top we're going to add a simple reset here and a matter of fact i'm actually gonna go here target the b4 elements and target the after elements and we're gonna say margin zero padding zero and i like to code everything in box sizing border box i just find it you know more intuitive or easier to use i think it's a better box model um i'm also in the index i don't know if i mentioned here but i have a google uh below the styles here i have a link to roboto font from google so i'm gonna say body font family and we are going to set this to roboto and just give it a fallback of sans serif you guys can set whatever font you guys want or if you guys want to go get that you can and next i'm also going to set a background color that i have selected here it's just a off-white color and it's just ecf0f1 cool so let's go ahead and add a wrap let's go and give the wrapper some spacing and everything so we're going to say for this we're going to say max width of 75 ram say padding of 2 ram and we're just gonna say margin zero auto which will center it out so next we are going to target the gallery and we're going to be using the grid css grid for this so we're going to say display grid and we're going to be developing from desktop and moving our way down to the smaller screen sizes for this project so on the desktop size we're going to want grid template columns we're going to put repeat and we're going to have sorry repeat and we're going to have three columns and they're all going to be one fraction of that and um we are going to so they're all the same size and we're going to also do a grid template of rows and we're going to set those to a repeat of four rows and we're just going to set them to 12.5 ram which is 200 pixels and we're just going to add a gap of 0.5 ram cool let's go ahead and refresh and see what we're looking at now so um we can't see it now but we do have a grid going on but we have all these images um overlapping each other let's go and target the gallery image real quick so i'm just gonna throw a comment and try to break these up in order here um we're going to say gallery and since we're using bim i'm going to say image with two underscores and i'm going to say width 100 height 100 and i'm also going to set this object fit to cover which is very similar to how using like background size cover so this is a way to target an image in the html and get the same kind of properties that we want for this and there we go everything is fitting into our grid since we have four columns down let's go ahead and inspect and i'm going to put this below here docket below here so we can see and i'm going to try to scale this up hopefully i'm not sure if you guys will be able to see this too well depending on what device you guys are watching this video on but as we look through we can go and collapse these images down you can see as we hit grid we have three columns but as i go down we have four rows and we're not filling those up but we will be so these will automatically fill into one grid position if we do not set a size for them so first thing first thing we want to do here or the next thing we want to do is we're going to go ahead and position all these grid elements are all these yeah gallery elements to fit into there so we're just going to say gallery layout i guess and this is gonna be the layout of the gallery here so we're gonna just start with number one and we're gonna say item one and this modifying this double dash is just a modifier to let us know that this is number one and each one of these have their own unique class i'm just using them hopefully this isn't confusing if you're unfamiliar with it you can just follow along so the first one we want to do we're going to give it a grid column so that we can define how many columns we want this to uh where we want it to start and how many columns we wanted to go and for this one the first number we're going to give it is one so we just if i inspect this again the first column is going to be number one and then we can also give it a slash like this and we're going to say span one so this first image is just going to be starting if we're looking at this gallery here it's starting from the very first position in the top left and it's only going to span one so after we assign this it's not going to actually change anything for this one because that is the default for that and we're going to say grid row one span one so for this one we don't technically i don't even think need to add this but we are going to add it because i think adding it's going to give more clarity to our code so if that one's number one to get the second image which is the roaring lion to where the buck is here we're gonna do a very similar thing except for we don't want grid row to start on are we yeah we don't want the grid row to start on position one we want it to start on position two so if i hit a refresh we are going to have the line overlapping that now so this is the first one and this is the second image so next the third image we want that third image to come over here and take up a good position of this so let's go ahead and target that oh we want it to take up yeah we want it to take up two height and one width so let's go ahead and do that we'll just copy this makes it easy just to copy because we're going to use the same thing now we want this one to start on column number two and we only want it to span one and we want this to start on row number one and span two columns and this one will be the elephant so let's go and see what we got cool looks good so the next thing we wanted we want to do is we have this buck and this one is going to stay where it is but it's going to span three columns down so it's gonna be grid column three span one and we're gonna say grid column one span three let's go and get a refresh there cool so that is not looking correct uh oh that's because i need to change this there we go so we're targeting four yes that's what we want there and then um for the next one we want this let's go ahead and inspect here so we can look at the gallery we want this one to take up these four positions here and then we want these horses just to go below that buck there so the little fox is the fifth position in our gallery [Music] we will select position five now this one is going to start from grid column one it's going to span two columns and we're going to start at one two three so this grid row we're gonna start at three and we want that to span two columns as well because there's two so it'll make a square in there and if we hit a refresh it looks great and this horse is just kind of falling into place but like i said we can add the content we want here we don't need to because it already falls into place but i think it gives our code a little bit more clarity if we just go ahead and add it here we're going to grid column three span one grid row three span one and we actually want that to start on four there we go so if we hit a refresh nothing should change and if i go and close this we have the layout that we want let's go ahead and expand this there we go cool so that's looking pretty good as we expand it out we're able to get a good look and this is connected there so i can't go full size let's go and just pull that down there we go so that's looking pretty good we're able to have the layout that we want so next let's go ahead and work we'll work on these image hovers next and then we will work on the responsive uh grid so let's go ahead and paste this over there like that cool so next let's go ahead and start oh i got a subscription there cool there we go so let's continue on um the next thing we're going to need to do after this gallery layout and the gallery image that we have down here let's go ahead and above this since the gallery image is in the gallery link let's go ahead and add the gallery link here and let's go and look at our html so we can get more clarity uh we have a gallery gallery item and then the gallery link is the next item in here so we're going to target this gallery link to make sure that this fills correctly within the image here and there's a few other things we're going to need to do or it fills over this image nicely it fills into this nice grid position sorry so let's say gallery link we're going to position this to the position relative we'll say display block we're going to say width 100 percent and height 100 percent and with this over image layer that work this image animation that we're going to have with the image getting bigger that we see in the beginning of this video we're going to say overflow hidden cool so that looks great let's next create the gallery link overlay so we want the gallery link overlay to be a position of absolute and fill this container completely so we'll begin by typing gallery overlay we'll target the class name gallery overlay and let's go and position this to absolute and we'll make sure that it's in the top zero left zero we might as well go go bottom zero left and right zero so that this will being positioned absolute and having all of the sides positioned at zero it will expand the entire width and height of this gallery link here so the overlay that's pretty much all we need to make sure that it overlaps it correctly now let's start off by giving it a background and we will say rgba we'll set 0 0 0 and we'll set the opacity on this overlay to 0.4 let's go ahead and refresh and see what we got here and that does not look correct position absolute tops bottom let's make sure that we have this laid out gallery oh i do see an issue here let's make sure that all of these gallery link class names are created with a double underscore for our bim and there we go so now these are all laying over the images properly so when we hover the image we're gonna the image is gonna be darkened and this is because we have this overlay uh rgba color so now we wanna position the text that we have into here and centered into the middle of all of these so what we'll use for this we'll say display flex we'll just go ahead and align item center and justify content center now we are going to add a line above and below this and if we don't set the flex direction to column then the lines are going to try to appear on the sides of the text so we're going to go ahead and just set that and let's go and refresh that that should center out there we go so this i don't know if you guys can see that too well but the text the link text is now centered let's go ahead and give this a link text some styles so first we'll say hey font size 1.5 ram uh we'll say color white we'll give it a font weight we're going to go with a bold font weight i'll just set to 700 and we'll also make these we'll transform the text here to uppercase now if we save that that should give us a nice little text cool so our text is looking proper now let's go ahead and see what we need to handle next so we want this to fade in and if we just displayed this gallery overlay here if we just set this to display none and then when we hover we set it to display block we can't transition that with css transition properties so the way that we're going to attack this is we're just going to set the opacity to zero and we're going to put a pointer events to none and we'll just set the transition and we're just going to set it to opacity and we're just going to go 0.2 seconds and we're going to go with the default easing on that and then next we are going to say when we hover this gallery link here we want to change we want to show this gallery overlay so let's go ahead and do that all we got to do is set the opacity to one and that is it so let's go and refresh and see what we got going on here cool so as i hover all these all the text is coming up properly so let's add these little lines above and below the text which is going to be pretty fun as well so we'll just go ahead and say let's add a comment for uh give it a section so gallery overlay text and for this we if we look in our index html we have the text inside of a span so let's just go ahead and target that span so we're going to gallery oh don't spell things wrong like me folks that's how you get issues gallery overlays we're going to target that span and we're going to create before and after elements to create the border top and bottom on this and animate them so we are going to make those position absolute so if we set this to position relative we'll be able to um we'll be able to add those top and bottom and make the make it relative to the span element so we can get the positioning that we want and so we'll start by doing that gallery overlay span and we're going to say before and for the line that on top and we're going to do an after after for the line on the bottom and we'll start off by saying content empty string so that we can create an element here in css that we can target we'll set the position to absolute we will give these a height of just two pixels um we're gonna give it a width of zero and we'll give it a background of white and that's gonna be it for now let's go ahead and refresh and those are not showing up yet um probably because we want to give it well content position oh yeah we probably we have width set at a zero let's go with 100 there we go cool so we're getting those lines we have top and bottom um the let's go ahead and position the before so that this one's positioned properly and then we'll move on set position before to top zero left zero and we want to set the after instead of instead of top and left we're gonna say bottom zero and we'll go right zero the reason why i had set this to zero is because we are going to animate it and if i set that back to zero we won't be able to see them which is fine and if i set this to if i do 100 we can see them and then we will set it back to zero so there we go and you know one other thing we want to do is let's up this line height to like three rim and give it some space so that looks good so let's animate these little lines real quick [Music] let's set this to zero what we're going to do is animate the width of them so now that those are set to zero let's just go ahead and say gallery link hover because that is what we want to target for the hovering property anytime that the link is hovered and we'll say gallery overlay gallery overlay span b4 and we can also target the after here as well and inside of here we just want to say width 100 now if we refresh that it's not going to do anything but they are showing up at 100 percent so the last thing we want to do with this is we're going to set a um on this before and after here we're just going to set a transition and we're going to transition the uh the width and let's just say 0.3 seconds and let's say ease we're going to just ease out on that for easing and if we refresh now when we hover the lines come in which is kind of nice but since the background is kind of fading in too let's let's make this what what speed do we have the background fading in so this background transition is 0.2 seconds so how about we set a delay on this transition to 0.2 seconds so after the overlay it fades in then we'll have that nice little transition there we go a little bit of a delay makes it look a lot cleaner so that's looking pretty good um let's go ahead and move on so the next thing we're going to tackle is we want these images to kind of blur and we also want them to expand when we hover over them to give it a little bit more of a hover effect so let's go ahead and target the gallery image gallery image we're going to say width 100 height 100 100 percent make sure that and our way we already targeted this listen so where did i put this gallery image yeah let's go ahead and put this below yeah let's put this below here because we have this gallery overlay and then we have the overlay link just keep them separate don't want this to be right in the middle of the overlay stuff that wouldn't make much sense so that works pretty good there so what we're going to do is when we hover the gallery link like we did before we're going to add the hover this time we're going to target the gallery image baseball right yes the gallery image and we're going to use a transform of scale 1.2 to target that and up here on the gallery image we should add a transition to transform and we are going to do this at 0.5 seconds we're gonna do this at a half a second so it's going to be kind of a slower transition it's kind of nice but i don't know if you guys can see this on the screen one thing i am noticing here is it's kind of got on some of these it's kind of got a weird little glitch like a one pixel little weird glitch and that's because this transition is um it's not really coming from it's coming from the default here but it kind of gets a little weird if we don't actually set a value so what we're going to do to offset this we're just going to set an initial transition and we'll just set this to 0.05 just a slight transition so if we refresh everything's going to be a little bit bigger but not by much and then i don't know if you guys could see that but it definitely cleans up these overlays that's just like a little bug that i've noticed when using transitions uh with the transform scale property so that's just one little way i found to fix it i'm not sure if there's a better way or not but that's usually what how i handle this and we're also going to add a filter to blur this and we're going to do oops not blue blur and we're going to blur it at like 2 pixels let's go ahead and refresh this cool so if you can see the background is blurring now which looks nice but it kind of blurs quick we want to add that to the transition as well so let's just go ahead and break this down we're gonna have a transform and we're also going to have a filter 0.5 seconds and so these transposition at the same speed it'll look nice and there we go yeah that's looking pretty good you can kind of see it slowly fade into a blur as this zooms in and the lines are coming so that's looking pretty good i think that's it for the image hovering next we just need to make this responsive and we'll be done so we're going to want to target this at a let's just say well before we do this let's kind of figure out where we want to target this this is already probably getting close to where we want because this elephant's in a field text back in the wild some of this text is starting to get pretty close to the edge there so if we pull this down and let's go ahead and open up our developer tool so we can kind of see what size we're working with here we're already come on oh there we go we're already this text is already breaking here so let's go ahead and pull it back here and we up here in this right hand corner we'll be able to see what size we're at here so that's getting pretty close somewhere around there let's just say 960 is everything good at 960 here these all seem to fit you know this is just based off whatever text you have here um yeah i think that's going to be the highest we can go it's probably 9.60 so i'm going to pop open a calculator and let's go ahead and say 960 divided by 16 and that gives us 60 rams so that's pretty clean round number so let's go ahead and use that at media screen and max width of 60 ram we are going to make some nice little adjustments so one of the adjustments i know i want to do before we even get into anything is i'm going to want to shrink down the wrapper's padding here so let's just target that first wrapper padding and i have a set at one initially so let's set this to two and the next thing we are going to want to do is set the gallery we want to keep the gallery rows because we're going to have the same rows four rows and the same heights but let's go ahead and set the grid template columns not rows the columns instead of instead of a set of repeat up here at the top we have let's go look we have repeat three let's go ahead yeah we can just copy this and we're just going to set this to two columns instead of three but we're going to leave the same amount of rows so we won't need to adjust that and if we set this to 2 this is going to throw off everything but we can start correcting each one as we go yeah so that just throws off everything but let's just start targeting these let's go back up to here let's go and grab this whole section here and then we'll readjust all the positioning here and gallery layout there we go and we're just going to go ahead and paste this into here and let's give it a little bit of padding here so that it's uh in line with everything else so the layout that we are going to want to do is we're going to do two little squares there are like two little ones next to one big one and then we're gonna do the reverse on the second row basically so this first one we basically wanted to take up the same amount and the second one isn't going to change either actually i don't believe now the third one is going to be the same as well the fourth one this is where we're going to start making changes so now that since we only have two columns this is actually going to go to these this is actually going to go to the end here um and it's going to span two heights so yeah instead of having three columns like before where we have the buck over here on the right hand side and matter of fact if we look right here instead of having the buck on the right hand side this is going to expand to where these two are like this and then this buck's going to be big right here and these fox and the horses are going to be on the right here so let's go ahead and hopefully that makes sense let's go ahead and complete that so we know we want this buck here to be positioned one now and we want it to span one column yeah so we just want it to be one but we want the grid row we want it to start at the three and at three and we want it to span two and i think if we do that everything else should fall in line are not quite oh yeah we have these these horses here okay what did i do grid columns we wanted to start at one span one and then we want this grid row to start at three and span two um and we want position five to start at grid call oh here we go okay we want position five here to start at position three are at position two and span one and we're gonna want this the same thing down here and we want this to span squid roast products position one ah there we go perfect there we go perfect so what i was getting it can be a little bit confusing um something you just got to think about so as we do this we just got to think like each item and as we lay them out and we didn't really do a lot of changes here and we don't need to repeat all the code but just for a descriptiveness of it i think it's better just to add it here so we can see all of these and how they lay out properly but let's go and inspect this this will make it a little easier to see what's going on and we can actually undock this and i'm going to pull this over here and give it some room and we're going to hover so as we were looking on our code here we were trying to figure this out so we know looking at it we have position one span one position two span one or a position one span one and then this one we just have position two span one column and then we did the same with the rows and we got that figured out down here as well so i think that's looking pretty good next thing we can do is let's go ahead and target the next breakpoint let's see where that's going to be as we continue to shrink down we'll probably want to break somewhere close to here yeah let's see let's try to keep going let's inspect here and just kind of see what distance we're at it's already yeah that's like all the way out the wall there so let's say about 600 let's open up our calculator and check what 600 is going to give us divided by 16. 37.5 uh yeah i think that'll work we'll just use 37.5 as our next media breakpoint and to do this we can actually just say i don't think we're going to adjust the wrapper at all i think we just want to target this gallery and i think we're just going to turn off the grid we can just say display block what's that gonna do i should just get everything lined up in a row there we go which looks good um nice and uh next we could just say each of the gallery items item each gallery item let's give it a margin of 0.5 ram and this is going to look pretty good here let's go ahead and get rid of this and so some of these images are a little taller than others we still have oh we still have the grid set on the height i think um or we're just saying height 100 so i think we just want to next set a gallery link oops blink let's just go ahead and give that a height and to make these scale down easily let's just give it a height but let's use the width to target the height so let's just say 80 view widths is the height we want to set for these cool so that actually gives it a nice overlay here all right gives it some nice space as we shrink these down so i'm liking that and i think a few other things we could probably do actually let's go ahead and adjust this so in here i think this text might actually be a little big let's shrink this down so what do we have this set at initially here we're just about done uh what did i set this text to uh i think i set it on the overlay here let's just go ahead and go into i'm just going to open this up it's kind of hard to see what i'm doing let's go into the computed and i have the font size set to i think 1.5 ram yes okay why am i having trouble figuring this out i'm not sure let's just go ahead and look at our code gallery overlay oh yes 1.5 ram so i think we're just going to copy this i think in here we should just set this gallery overlay let's just get rid of everything and let's just kind of shrink it down i think oops what's not 125. once we get to this tablet size we should definitely shrink it down a little bit and we can actually probably bring this size in just a little bit more than let's go ahead and see let's bring this over here and inspect this a lot of tediousness here we go as we're shrinking down let's go ahead and get this out of the way and we can actually go a lot more than we did previously somewhere maybe closer we did what 600 originally yeah so i think we could even just change this down a little bit and get a little bit more room i'm just going to adjust this to like 35 and then at the very end here i think i'm just going to want to set the font size on mobile to let's just set it to one room and i think that'll pretty much be it for this except for when we refresh if you guys can see that that is super annoying i hate when we do that and there's actually a really easy trick to eliminate this uh trans transit uh transitioning of css so if we open this up we can just go into our star index.html and here at the bottom let's just add a script with a space in between and that'll actually that's actually just a quick little fix to um so we don't have to worry about the little refresh on load cool and now we're not getting that transition on load and if we inspect we can go ahead let's go ahead and re-dock it to the side here and let's go and click this and see how it's working it looks good so it transitions nicely and transitions nicely there cool and let's just go ahead and make sure our transitions all look good on hover and i think that is pretty much gonna do it hopefully you guys enjoyed this video if you guys have any questions feel free to comment i'm going to like i said in the beginning of the video put this up on codepen so you can grab that code and use it if you'd like and um yeah feel free to uh like subscribe if you enjoyed it or not if you didn't either way and hope you guys have a great day thanks

Channel: Terryl Brown

Views: 3,057

Keywords: responsive, image gallery, css, html, gallery, css grid, responsive website

Id: nEej0A08RYs

Length: 41min 53sec (2513 seconds)

Published: Tue Aug 11 2020