Can I clone this fun effect from CSS Day using modern CSS?

Key Takeaways

hello my friend and friends here we are on the CSS day website and the reason we're here is because if we come down to here I posted about the CSS day a little while ago and on my Discord server and on Twitter a few people were talking about this section down here where we highlight one of the people's names or we hover on top of it it highlights the name and the image gets bigger and it works in Reverse too if I go on Josh here you can see it's making Josh's image bigger but it's also highlighting his name at the same time which I think is is kind of cool um so yeah it's a nice little effect and just to say before we dive into it the reason I was posting about it in the first place is because I am going to be speaking at CSS day I'm really honored uh to be doing that it is in Amsterdam on June 6th and 7th of this year and just look at this list of people that I'm going to be talking with I'm just really honored to be speaking at it and it is their 10th anniversary really really uh excited for this um so if you are interested I'll put a link down below if you want to check out the tickets or anything and if you are able to make it definitely let me know cuz I'd love to meet you uh while we're there but let's get into how we could do this cuz it actually turns out this effect is over 10 years old now it's almost 11 years old uh when they first created this and I wanted to see how I could do it with modern CSS uh instead of doing it the old way I'm not going to be focused on how to get it to work within this specific layout um I just want to look at the effect itself with how the hover and everything could work using modern CSS instead of the the older way of doing it um because I thought it'd be a fun little challenge to be able to do and so we're going to start here with a wrapper just to hold our content and in here there's two things that I think we're going to need one is something to set up our grid and then we're going to have the list here but I'm going to steal a little bit of how they did theirs even though we're going to be using a modern CSS way of doing it but I'm going to do something like this to start with and we'll break this down uh really quickly where we're going to have a div of a speaker grid I guess it could be a section or something else whatever you need uh but we want this outer div here and then we want the U inside of that and it's going I think this layering is going to make a little bit more sense um a little bit later basically I don't want my UL to be a grid though cuz I don't want each list item to be on its own grid row that would just become hard to manage so I think this is going to be the easier way to do it and then for each one of the speakers we have a link the link has the name as well as their image included in the link and then all the way at the end outside of the link we have what their you know their the name of their talk or what they're going to be doing we have uh Jeremy and Miriam here who are the MC's but then we have all these you know just the general topics um that are outside of the link so if we set it up like that for now we get something that looks like this so let's jump on over to the Styles you can see I'm doing a bit of a dark mode here so I do have a little bit of code written down uh here at the bottom but it has nothing to do with what the layout of our site actually looks like right now and the first thing we're going to do is just turn off the list of that we have here basically um just because we want this to have a list style of none and the margin and padding of zero just to make it a little bit easier to manage now what we want to do is we want to set up a grid obviously um but let's come and look at the sort of what we're after where I have three columns here I have this big space here and then I have this area which is my regular the actual list is over here so what I'm thinking for this is to do something like this where we have my speaker grid uh grid and so obviously we need to display grid on there and we want a gap of say one REM just to create some spacing around stuff and I have my Dev tools on so we can see the grid is there um and what we want to do and if if you don't know how to do that just in your Dev tools you have a little grid thing it's on all of the different browsers have some sort of feature like that these days um and then let's start off really simple where we can do a grid template Columns of repeat and I'm just going to do two columns of 1fr for now to create two separate columns that we can see the reason I'm doing that to start with is just to show you sort of the basic idea of what I want to do here and then we're going to quickly level it up from there so what we're going to do is we're going to take this entire UL we're going to move it over we're going to do that by just saying that it has a grid uh column of 2 over 3 so what we're doing here is we're going from line number two all the way over to line number three here so it's positioning it within that column perfect that's fine but I want to move my images over to this one hm that's where you know how would we do that well let's go and grab my images and you know what I'm going to do I'm actually going to use some nesting uh in here so if you're not used to nesting it's a little modern CSS we said we're going to do modern CSS and it's going to make my life a little bit easier um since I didn't put class names on anything so if I save this this works this is just my parent selector so it's my speaker grid UL is basically um what that would become exactly the same selector I had before and then so I can also come here and then I can just say image and select all the images that are inside of my speaker's grid again this is my parent selector here they've removed the requirement of having that in your nesting but if I do that oh look grid Chrome has updated and we can do it this way now instead uh okay I didn't realize ch chome had updated their nesting syntax to fit the the this finished version of it um so we can just do it like this with the little emper sand and it's a little bit cleaner so we'll go we we'll do it this way then this this is my UL that's in my speaker grid my image that's in my speaker grid and actually just really fast before I position this uh if you want to use nesting that's cool but it is not ready for production yet browser support is far from perfect I'll put a link in the description um just so you can get an idea of what it is it's not to say you can't do everything I've done I'm doing in this demo without nesting nesting is more just for Dev experience than it is anything else so everything here would work outside but I said modern CSS we're going to stick with it um so here let's do a grid column and this is we can't do right now I can't do a grid column of 1 over two cuz these aren't grid items these are inside my ul and these are actually inside the L and inside the a but I want to pull them out and I want to put them into this grid column ah there is a way I can do that and it's by using a position of absolute on them when I do that it's still not going to work you can see they're still just they're all stacking on top of each other they're not going where I want them to and just to highlight that even more let's come on here and do a left of zero and a top of zero and when I hit save they're going relative to the viewport itself this grid column means nothing right now but we can change that by coming on the speaker grid here and making this the containing block and we do that by saying this has a position of relative and now uh because the speaker grid is position relative these are position absolute the speaker grid is the containing Block it's the nearest ancestor that has a position other than static they are living they're now being positioned relative to my speaker grid and because my speaker grid has a display grid on it they are living inside of that grid cool right and this is sort of part of the basis of what's going to make all of this work you'll notice my grid changed color there and everything went onto one line um I was a little confused on why they you know I had mirium and then MC was on the next line under and I was confused about why uh and I just came here and made a small change in I I had a space and I removed a space and I tried putting one uh when I did that everything that was on multiple lines was no longer on multiple lines um I don't know I guess I just needed a hard refresh once I pulled the images out of the flow that's the only thing I can guess but there we go at least it's working um and yeah so this is the the idea that we want to do there um by positioning my images position absolute but obviously we need a bit more of a robust grid because I need to have my three columns I need a space and then I have this on the side so for me the easiest way to be able to do that is let's come here and we're going to say that we're going to have a uh column count and we're going to do three and then we're going to say a row count we're going to say five and that's just to match the idea here I'm really basing it on this is my grid right so speaker grid I'm thinking of the images that's why we're going to use those and whenever I have grid we have longer declarations I find it easier just to come in with these types of things um and for more settings that we might want to change let's come in with a column size and for now I'm going to say 100 pixels we'll probably modify this in a little bit uh and let's say a row size as well and we'll say 50 pixels um just because we sort of have that aspect ratio type thing going on over here let's jump back on over to here uh just so we can see how this is going to get set up with our grid and I apologize it's my face that's on top I was just the last one in the list but I I don't like staring at myself but there we go uh we'll get rid of that soon enough so what we're going to do is get rid of this grid template columns that I have right here and we're going to replace it with this long declaration that we have right here where I'm using the repeat Syntax for this part so we're going to say repeat and then my column count so we have three columns that are going to be my column size so three columns of 100 pixels then I just put a 60 here we could always come in with a better number and then a 1fr so if I hit save on that it's not going to look fantastic um but we're going to get this which is broken cuz I said columns count here instead of column count so there we go so we get 1 2 3 that are at 100 pixels each then we get a 60 pixel and then we get this 440 um at the end and that one's going to be the one that's a bit more adaptable depending on uh the screen space that we have available to it where if it runs out of space it can kind of Squish and grow a little bit and now I want to do the same thing for actually declaring some rows and we're not going to see this quite yet um sorry when I there we go it's back when you scroll sometimes the grid um preview thingy gets a little mucked up um but this one what we're going to do is we're going to have an auto at the top and end and this is where my main grid is going to be in the middle so again it's going we're going to have five you know this is the number five here so we have repeating five times and then our row size is 50 now it's a little bit mucked up right now uh and we're not really seeing it because everything is in that auto column at the beginning um and when I oh there it is now that I scroll down um you can see we're getting our grid down there at the bottom with the rest of everything we just need to get everything onto that grid properly the reason I'm doing this Auto at the beginning and the end here is cuz if we look at their grid we have like some you know the we have some space at the top and the bottom and I just want to sort of keep that space as something that we can work around with and the auto should work really well with that because if this ends up being like say they had a whole bunch of speakers well this would probably get longer but whatever if the images were taking up too much room those Autos could reach zero and then it wouldn't cause any um issues along the way so uh that will work for me and then there's a few different ways that we could actually approach this but these days I really like using uh line names so I'm going to add one more thing to make this declaration even longer uh which is over here I'm going to call this one uh list start and then we're going to come over here and do a list end because I want my list to live in that last column over here and we're also going to come here and we're going to say that we have my list start over here because it's the lists on the rows the list will start at the top and go all the way down to the bottom and so over here we're going to say that this is my list end and the cool thing with that is I can come here instead of doing a grid column or a grid uh row I can actually say that this is a grid area now of list and this is because when you use um the list start list end syntax you can do a grid column of just list and it knows the start and end it's using those as your starting and ending points and if you have grid rows and grid columns that have the same name it's going to create an implicit grid area so you can actually use the grid area and you can see it's showing up in that last section and it's covering that whole ER area right uh and the other Advantage with this is again that idea that this list let's just put a border on here border of 5 pixels solid lime so we can see it I'm not worried about every one of these list items creating a separate row cuz as I said earlier that would become a little bit of a nightmare on managing this other grid that we're going to have here and having these all connected is really important too because we need these images to be part of this and they're actually part of this link because when we hover over stuff when whether it's this or the image itself we want to have those hover effects coming in so that's really going to be easy to do because they're all part of the same link but we need to take a little bit of extra work here and just setting up this grid to work properly but this makes our life a lot easier by having sort of an outer grid and this list is just positioned where we need it to be and now we can get our images where we need them to be too so we'll take off that border and now we'll worry about getting our images in the right spot so here uh we don't want to we could do this where I could say my image like select my first image with an nth child and put it in my you know right here and then the second one then the third one then the fourth fifth 6th 7th e8th 9th but that's kind of annoying cuz every time you add a new speaker then you have to position where they would be on the grid and that would be kind of annoying and I think a little bit more interesting is selecting ranges this is how they did it on theirs as they selected the ranges they were using position absolute we're going to be setting them up on the grid well we're using position absolute too but they sort of use their magic numbers on the left and the top I think to position things correctly we're just going to be setting them up on our grid so to select ranges there's a few different interesting ways that we can do that and so I'm going to do I'm going to paste this in we'll sort of explore this um quickly uh you'll see I'm taking my speakers grid then I'm selecting my list items and then I'm getting the images that are inside of those and I'm using the list items to count and that's because I can't count based on my images that are here and the reason for that is my images are always the first nth child one right like it's the first image or I guess and of type it's the first item they're always the first thing cuz there's you know if I look at my speaker grid this wouldn't be nth trial 2 because it's inside of this link which is inside of this Li we're not reaching it so I want to look at my speaker's grid and then count based on my list items that are in there and then grab the image based on there so this one is going to be our every third image so we're starting with the first one and then doing 1 2 3 and it's grabbing that one 1 2 3 and it's grabbing that one so we're getting every third image then this is exactly the same thing but we're starting at the second image so we're going here we're going starting at the second one then we're doing 1 2 three we're getting Rachel then we're doing 1 2 3 we're getting Julia and then we're doing the same thing here but starting with the third one so then it's a we're starting here and then 1 2 3 and we're getting matthus 1 2 3 and we're getting roel you get the idea so let's hit save and you can see we get some columns appearing now we can do the same for our rows but our rows are a little bit trickier cuz we really need to get specific ranges of content for these ones I can just say every third every third every third based on different starting points we can't do that for the rows we really need to say from this element to this element but we can also do that with n child and so let's hit save here and you're going to see everything sort of starts falling into place we have a few little bit of issues with some overlap we'll fix that in a second uh but let me explain what I'm doing now and I should have a comment here this is my first row uh first row and so what we're doing is we're using a negative n and if you don't know how negative n works it means we're sort of counting backwards so we're going from the end and we're going to go all the way to the third element so we're basically saying like starting at the third one let's go here starting here we're going to select everything backwards from there so go from here and then go backwards and it selects those three so these three are going to go across the top perfect then we want this next three here so we can use that same trick but we're going to create some it's a little bit different because we're going to say start at the fourth one so we're going to say start 1 2 3 4 so start at Josh and then here we're saying go to the sixth one and start counting backwards so it's going to go to matthus here and it's going to do mathus Rachel and Josh because these are the only three that are within this sort of range that we've created between these two right here that we're going to do the same thing we're going to go from the seventh one to the 9th one from the 10th one to the 12th one from the 13th one to the 16th one then we're just setting up the grid rows that each one of these needs to be on we'll hit save or we already had hit save so they're all showing up in the right spot we need them to look a little bit better so let's come back up to style those images um I don't think we necessarily need this but I'm going to say the width width is 100% just to make sure nothing weird happens the height is 100% which will squish them and then we can do an object fit of cover and then it's going to do that uh now one thing this isn't doing if you look at their original one it was much more zoomed in on just like the eyes of the image and then when you go on top it's sort of um zooming out and I have a feeling there's a bit of custom stuff going in um just cuz if we look here at Julia notice how like it follows her eyes even though her eyes are off center a little bit so I'm wondering if they custom um did it I didn't look at their specific one but they really made sure to be in on their eyes so I'm not quite as zoomed in um in a sense and what we could do is you could each you could go on each one with an uh not position but an object position you can move them around uh let's just say I don't know uh 25 pixels um you see it moves the item around I think this would be really hard to get correct um and I don't think there's a way to like zoom in more we'd have to play with the aspect ratios and other stuff so it's going to be a little bit different from how they got theirs because there's a setup as a background image they could just do background size um and make the image a lot bigger um but it I think the end result is going to get us uh close enough uh and if we look at theirs they also have those the Border radius on it so we can come in add a border radius of I don't know5 r or something to give us some round corners let's turn off that grid and you can see it's looking pretty good and we're almost there we have this one last sort of Step that we need to do where we want it when we hover on top of one of them we're highlighting the name and we're highlighting the speaker and it's actually really easy to do uh so let's come in here we're going to stick with inside our speaker grid we have our UL we have our image we'll go in between the two and we'll choose our a a and I'm going to say is uh hover and focus just so we get both the hover and the focus States here and let's just come in so the link will get a background color um I have some variables set up so let's just do a primary 400 and I think I need my CLR in the front there um so if I save there as since as we get it's highlighting the one that we're on top of but that should work here too so that that's magical in my opinion um this is really the cool part of it because the image is inside of that link when we hover on top we're getting it to highlight the the right person along the way I find that just really neat and really cool and that's sort of why I wanted to tackle this was to figure out how they did this part um and I think that's really neat uh if you haven't seen is before this is the same as doing like a hover and doing in a separate a focus um but we're just combining it um together using the is there cool um obviously we have that little decorational thing that would fill in the middle but I think that's looking pretty pretty good um and then using nesting once again we can come in here and select the image that is inside the link so when we hover on them uh I guess we want them to get bigger so we can say the the scale is two and scale is its own property now so we can do that um and let's just say the width is I don't know 100 pixels the height is 100 pixels um and let's just see what that looks like so if I hover on top it's working cool now we're going to have a little bit of an issue but we're going to see how we can fix it too um obviously there's a z index so let's come here and do Z index of uh two so when we do that they should always be on top at least so that's a good thing but there's a problem because what we're going to want to do on these images uh I think lower down yeah right here is the regular image it's kind of weird I'm going to move this uh after my image just cuz of the way the nesting is working there I find it weird having my regular image than the hover image just doesn't work for me um so we're going to come here we can say transition of uh I guess we're going to do everything um so let's just say 500 milliseconds for now and see what it looks like cool the problem now is when we see when I'm on that when it come off the like um Ro's image here like if I'm on Julia as soon as I come off or else comes in front again and that's because we're only getting this Zed index while the hover is happening we're not having the Z index when we're off the hover and that's kind of annoying uh it's not a big deal I guess at the end of the day but you see how like there you see as we come off that other image is popping in front so there is a trick to fix that I'm going to come down here and we're going to say at Key frames and these key frames we're going to do is let's just call it Zed index hack I'm going to say 0% 99% Zed index is going to be a one uh and so the reason I'm putting that on there is uh and I'm not putting 100 % I guess it could even go to 100% because of how I'm doing this we'll try with 100 and if we have to we'll knock it down to 99 um but basically I want my my images to get a zed index of one when we're not hovering on them uh we want it to be on our images I'm just going to come after this a and we're going to do this where it's a not hover comma focus and then here we're going to say our images so an image that's inside a link that's not being hovered or focused this is going to be weird I'll explain in a second we're say animation uh is my Zed index hack and we'll say 500 milliseconds we could I guess make a custom property there cuz we're using that 500 milliseconds in a few spots but I'm just matching the transition timing I have um so now let's go on Rachel Andrew here and when I go off notice how she's staying in front of Julia let's let's turn this off for a second we'll we'll come here just to remember um that when I'm on Rachel and when I go off she was like this image of Julia that's right underneath her when we go off she was falling behind it as soon as we started zooming out and it's happening with the image um of matus as well um that's next to her so we get this weird little glitch going on and this solves that from happening because we have it there and then when we come off you see it's always staying in front this is going to work for every one of the images the reason this is working and it's kind of weird is I'm doing uh as soon as we have the Zed index it's going in front cuz normally my images don't have any Z indexes on them there's nothing so when we're hovering we're going Z index 2 so it's coming in front because when we didn't have that Z index 2 if you remember it just like goes behind everything and it's really really awkward right so we said Z index 2 to make sure that it's in front of everything when we're hovering on it but when we let go it's going back to its natural order of everything we don't want that to happen we want it to stay in front but not like actually we could probably get away with this also being a two um and you'd be okay let's just to see oh see there because you you'd get this potential problem going on because they're both in that like hover state they're both within that 500 milliseconds we run into an issue so we do want that to be a one we want this number lower than that one so as soon as I have run a new image that one's that index is higher as the other one is moving backwards again and the real trick here is we're not doing a forwards or anything like that so once this animation is finished the you know we're going from zero to 100% with a z index of one and as soon as that animation is done the Z index is no longer being applied to that anymore so we have the hover then we're not hovering so as soon as we stop hovering we enter this world where we add that animation on as soon as that animation is done after 500 milliseconds it loses its Z index and it falls back into the regular world of everything else again and so yeah I think it works really well if you go really too fast maybe every now and then you catch a glitch obviously it's not exactly the same cuz we're not so zoomed in on the eyes uh but just by playing with the scale by using object fit I think it works out pretty well uh on the overall thing we could you know play around with the sizing of everything here too the width and the height plus the scale um obviously oh I have a Max width on my images uh just cuz down lower I have a reset so you could always do a Max width of uh the same size um or something else just to make sure if you wanted them to go beyond their actual Max width plus you have to take into account the scale here um of course you could just make this a obscenely large number like 100 VW just to get rid of the the the max width you had on there if ever you need your images to be really big um but yeah I think you know play around with it and obviously the width and height here is getting doubled so just take that into account too but I think it works out pretty well it's again not exactly the same but pretty close and so I hope you like this effect too I hope you learned a couple of things along the way I think it's a lot of fun um obviously we'd want to do some improvements here uh as well just with the colors right now I think my background color plus my text color here is probably not as high contrast as it should be uh I didn't put any alt on the images though I'm not sure if I need to um just because the the name of the person is here and then this is here and the images are sort of decorational so I'm not 100% sure if we'd actually need to have alts on there um they're sort of decorational to me since this is giving the context of what the image is um so I don't yeah I think maybe leaving those as empty would actually be fine if you have any opinions on that please do let me know down below and if you enjoyed this video you would probably really enjoy this one is right here as well and with that I would like to thank my enablers of awesome Andrew Simon Tim and Johnny as well as all my other patrons for their monthly support and of course until next time don't forget to make your corner of the internet just a little bit more awesome