Create a cool bubble zoom effect with CSS

Key Takeaways

hi there my FR and friends I hope you're doing well I'm doing fantastic even though I'm fighting a little bit of a cold so I do apologize for the stuffy voice but I want I was mucking around with a few things and I came up with this kind of interesting effect um thing and I'm not the first one to do this but I was playing around with something else and then I said wait will this work and it does um where we can sort of hover on something and then have the two siblings interact so the big you know the one to the right and left are both being influenced by this one in the middle CSS only we don't need JavaScript to select the preceding sibling um also this sort of like fun little animation where it shoots out it's a bit more of a raw video we're going to sort of explore this effect in terms of like here's how I did it all but definitely it's one for you to take and sort of expand upon and do a better job than I did here but I want to teach you just how this works and some of the cool features CU there's a few CSS tricks along the way to make all of this work and so if this sounds interesting to you then stick around and we're going to be diving into it in one second but I just want to let you know before we do that that I do have new merch here is my style sheet shirt I also have a grid shirt a color space shirt uh and they're all linked just down below if you're interested in those if not you just want to get to the demo well we're doing that right now so let's dive right into it so we're going to get started with this starting with not very much going on um I have a div here with a class of avatars on it this is what we're going to be using this could be whatever you need it to be and then the direct children in there are the things themselves now obviously I don't want my avatars to look like squares we have here so I'm going to make them look a little bit better uh just giving them a border radius a border on them that's white and a a bit of a box Shadow uh that is on there the finished code for this is going to be linked down below um if you want to get access to it cuz you know following along in a video can be a little bit annoying but nothing too fancy there and for the important bits we will slow this down um and and write things out a little bit but you can see I get my circles there what I'm going to do is come up here on my avatar so avatars and that's the apparent if you remember if we go back here we have the avatars and then Avatar um honestly this could probably even be a list like Avatar list and then this is actually like you you know UL Li um we'd want to think a little bit more about the semantics but it really depends on the use case that you have and how you're going to be doing this so uh I don't want to be too prescriptive on that um for this demo that we're looking at right now and uh yeah on the avatars here we're going to do is we're going to set an avatar size and I'm doing this as a custom property here and this might seem a little bit strange but this value is going to be very useful um as we come through and set things up so then down here I can say that my width is my VAR Avatar size and that should get them to be 100 pixels each which is perfect uh and then the other thing that we're going to want to do here um is a set an aspect ratio I don't need this right now of one and I'm also going to add an object object fit of cover um these two are just sort of like a fail safe in case somebody supplies an image that wouldn't be a perfect square um in which case this is just make sure that everything works and we'll still get a circle instead of some weird um oval shape um and then the cover make sure that the image isn't distorted if it is something so not necessarily for this demo but if ever you're doing this user generated images whatever this is just some defensive CSS that we're writing right here now let's set up our how we're going to do this and normally I would actually use a flex box for something like this if I just need them to go next to one another but because I want that hover effect where they're sort of overlapping and then not overlapping uh I actually think that grid is the easier solution here so if you don't need that type of effect maybe just doing flexbox would be fine but we're going to throw a display grid here and this is why I actually wanted my avatar size here cuz we're going to do uh let's come here actually and say that my column size is going to be my I will do a calc we're going to say VAR Avatar size / two and I'll move this over just so you can see it a little bit better but again the finish code is down below if you do want to reference it uh but we're going to have the as I said Cal Avatar size divide by two and why I'm doing that is cuz then I can say that my grid template columns are going to be a repeat and I'm going to do 10 for now that we're going to fix this in a second um to make it a little bit more adaptable but we're going to do our VAR column size and if I hit that you'll see that they're actually overlapping each other because the grid that we set up the column size is half the size of the actual images so we sort of get this type of thing going on I'm also exaggerating with more than you'd probably have for this type of thing and maybe they're actually a bit big let's uh drop this down but the nice thing is if I change this that automatically changes this which automatically changes this over here um so we can make them a little bit tinier there I think that makes a bit more sense maybe 70 you know not too small for demos but um yeah we can see them coming in right there so that's great uh and the one issue with this is we do want to use this repeat Syntax for this to be able to work so ideally this number could be adaptable to how many items you have so I'm actually going to come here too and do a Avatar Avatar count um and we're just going to say that it's 10 and then this could be my VAR aatar count and it's going to look exactly the same the advantage of this being a custom property is if I was actually doing this on a live site I could use you know depending on how these images are actually being brought in but I could get the the length of you know the array or whatever it is or I could find out it's easy enough to find out how many of these there are with JavaScript and then I could update this Avatar count with JavaScript super easily because it's a custom property um so even you could you know technically leave that blank here and make that the fallback or whatever it is but setting it this way just makes it really easy with JavaScript to get the right number that's there so that's why I'm doing that as a custom property but even if you're not using JavaScript and you're manually doing this it still makes it easier than like having to look for the repeat you set your Aver count your avatar size um this is sort of a calculation you know don't don't don't change this right um and I do this a lot actually now with my my um custom properties where I have like the user settings at the top and then calculation stuff that's happening and then I use my calculation stuff lower down um so having a little comment of like this is calculations this is user settings or that type of thing can be kind of useful um just so people know what they what they're allowed to play with but let's get to the the fun bits now where we get to animate this a little bit uh and the first thing we're going to do and this is where things are kind of interesting and I think something that not enough people realize is what we can do is I can do my avatar hover and this is a hover effect um though you could definitely get this to work with Touch Too depending if these are like interactive elements I just have them as images right now so I couldn't even like tab onto them for um for a focus um but let's say these were actually links or something that the user could interact with a touch would work in that case on it and I could also set this up to work with a um focus State as well but I'm for now uh I'm just setting it up this way um because I want to focus on the effect itself but again think about how you're going to be using it um if you do want to do something like this cuz there's always a bit more consideration I want to focus on the effect itself in this demo and then so on my hover here what we're going to do is we're actually going to come and we're going to change the column size so we're going to copy this here I'm going to paste it here and instead of doing a divided by two we're going to do multiply by 1.5 let's say and it's not working cuz I'm doing that on Avatar not avatars let's go and move this up to here uh I don't want to change it on my single Avatar I want it for that entire parent which is the fun part of having the S and the not s so naming is important uh but there we go we can actually see that when I hover and we're getting it a little bit too big for for my demo because we're getting some horizontal scrolling but you can see that that's causing them to shoot out because we've changed my column size so if we come and just do a quick inspect on here and we open up my grid you can see there's the grid when I hover The Columns are 105 pixels big and when I'm off they're 35 pixels big so we're modifying the size of the columns and this is the part that I think most people don't realize is that you can actually do a transition of grid template columns and let's say 500 milliseconds and now look at that do you know that you could do that I think some people know that but I think a lot of people don't realize you can modify or you can transition grid template columns and grid template rows there are some limitations I think if you're using F FRS to a different unit it doesn't work or something like that but in a case like this it works really well so that's pretty cool now the next fun bit is on the actual individual Avatar itself so what we want to do here is we're going to say uh Avatar hover and again if you had Focus States or other things like that um you definitely want to take that into account uh what you might actually want to do here is link this um just really fast here it could be avatars hover and an avatars uh Focus within so say like I can't focus maybe on the Avatar itself but if the ele elements inside here have a focus State you'd want this to happen so if I'm tabbing onto it or it's a touch event where like somebody can touch to select something and you want it to spread out like this this focus with in would work for both of those use cases um so yeah I'll leave it like that just so we have that in here even though it's not doing anything specific in My Demo use case but this would work if it was a larger project and you'd have the same influence whether it was a touch event um that's help gaining focus on something or somebody's actually tabbing through and gaining Focus on one of these and again then this would be an you know the Avatar hover and an avatar focus in this case the focus we can't focus on them because uh of how we have it set up but we'll leave it like that for now just in case you come in and grab this code and use it for something that has links in it or buttons or something um instead what we're going to do now is when we do that let's start off by just saying that we get a scale of we'll do two make it nice and big so when we hover on one of them it gets huge right what we can do with that to start with is let's come here and we can do a transition to make it nicer and do a scale there and we'll do our 500 milliseconds and so now when we go on top when we hover on them that looks kind of nice um there's this annoying thing with the way they overlap each other here we could look at fixing that um as well as we go through this for now I'll do a 1.5 just so um no I think we'll stick with the two and I I'll look at the solution is I've looked at it in another video recently um but you see when I'm on this one then I go that way how it waits until the transition's finished before it falls back so we'll look at a solution to that um it might also fix this where it that whole time actually I have another solution for that one that we'll look at that's a little bit easier um so yeah kind of cool effect but now if I'm hovering on say this one I actually want the two that are next to it to also grow but to grow by less and that's where I think some of the fun here is Right some of the the Intrigue um so for that using CSS only we can select uh very easily these an element after an element so I can say Avatar hover plus. Avatar so this will select the Avatar that comes immediately after so just to show you uh we'll do a scale on it of 1.5 but we're also going to do a border color of lime for now just so we can see uh that it's really working so you can see when I'm hovering on this middle one the one after it is actually getting the lime color on it I go on this one it switches go on that one so we're always selecting the element that's coming after the one I'm hovering on how do we do that to the one before though this used to be something with CSS there's sort of tricky ways of doing this so you could actually select every element before something um that was I'd say it was a little bit of a hack um in a sense but now what we can do is we can select a single element by saying Avatar has plus do Avatar Avatar Avatar hover so what this is saying is do we have if the Avatar so any of the avatars has a sibling that is directly after it that is being hovered on super cool uh and for you know we we'll keep the same styling on there and now you can see that both the one before and after are getting that green border on there and they're also increasing in scale so when I go and I think that's really cool uh so what we can do here just to improve this is I'm going to pump up the Zed index of the middle one uh Zed index can be A2 just so the one that we're hovering on um actually we got to save our CSS to do that but the one we're hovering on should always be in front so by changing that Z index it will fix that problem um and now we have this going on and I think that's pretty cool so if we take off this lime color let's do that hit save now we can see when I do that it's always the one that we're hovering on that's in front then the next two are going to be a little bit smaller and then we go to the regular size and of course you could step this out and actually go further back um with a little bit more complication in your selectors but you can definitely do that and sort of Count Your Way along uh through something and do range selectors and other stuff um to be able to do stuff but I think that's already pretty neat the one problem here is when we're hovering on and then we hover off it sort of has that awkward awkwardness to it a little bit so what I'm actually going to do is let's come on not the Avatar we're going to come all the way up to the avatars here where we're doing the spread animation and where that spread animation is coming I'm going to say that we have a uh transition delay of 500 milliseconds but I'm not going to have it when we hover on there so here we're going to do a transition delay of 0 milliseconds and just make sure if you do a transition delay you cannot put zero uh for timing anything that revolves their own timing you have to have a unit on it a zero is not always a zero in CSS even though a lot of the times you can have a un unitless one with animations transitions anything with milliseconds stuff like that you have to have a unit so when I have her on it there's no delay and we grow um there's a bit of a bug there we'll look at addressing that in a second but you can see that we're we're coming and we're growing but then when I come off it's going to do that delay here and then it's going to shrink down cuz that's 500 milliseconds and then it shrinks one other advantage or one other Advantage one other thing here is we could do um a you know transition duration of 500 milliseconds here and then we could use that everywhere that we need it so VAR uh paste that in I'm just going to copy this whole thing um and the advantage with this is then we could control because we need this in a bunch of places so then you're not updating it everywhere you're updating it in one place and then it will work everywhere at the same time um so there we go now there is a few things here hover um not hover has has really good support but it's not perfect it's at like 91 92% I'll put a link in the description too to the support table in case you're watching this in the future but what we could do here is we could actually come in with an at supports and normally at supports you can only look for like property value stuff but at supports which is a feature query a lot like a media query it actually allows us to do selectors now as well so I can say selector selector and in the selector we're going to do has and we'll just do a plus star or something um just cuz I think if I remember correctly when you need to have a valid selector here to start with so we need something inside the has um but you also want to put in a more complicated selector so something that has like the descending symboling um or whatever just to make sure that everything here is going to work you could even bring in like this ex you know you could copy and paste this technically if you wanted to um and then we're just going to move all of that into here and the reason we're going to do that is because I don't want only this part working and not this part um even though this is a list so it is possible that this if has Isn't supported the whole thing just fails anyway uh so we might not technically need this but I think it's good um practice to use them so if somebody you know if browser support is not a thing it's only going to highlight the one that we're actually hovering on but if browser support is a thing we can hit save on there then they get it where the middle you know the two on the side are also growing now a couple of little things here um just obviously we're overflowing off the page when I do this so it you'd probably want to do something where you're keeping that in check um just to be careful with it so a few things I would probably just to start off with I'd probably be making these a lot smaller um to start with so we'd have something like that so it's staying within sort of the range but you might be on a mobile device or something else like that where you need some horizontal scrolling potentially where you'd want to scroll on stuff like that so you could on the avatars itself um where we're setting up that grid we could set something up with a Max width of say I don't know 80 VW um or something like that and then I'd come here with an overflow X of uh scroll or actually we'd use Auto right cuz we don't want Auto um and we'd have to is that going to be big enough it's not we'll do like an 80 here just to make them bigger so we actually get some overflow um so then we get our overflow coming this way obviously there's other issues now because of our scaling we're losing stuff um so I'd probably want some padding on there padding block so top and bottom maybe two Ram or three Ram something just so when they grow we still see them um and that would actually work pretty well the one thing I definitely we have my shadow that's still coming off the bottom so you definitely need to play around with that just to make sure you have enough you'd custom do your scroll bar and other stuff uh along the way um not zooming in and out like I'm doing right now um but yeah something like that if you needed to and you're really going with this grow effect just to be careful with it throwing that out there so this isn't perfect I just thought it'd be cool um I wanted to look at mostly this hover effect which I thought was kind of fun uh and explore that with you um and actually we don't have that issue anymore with the Z index that's kind of funky um I don't think it seems to be working pretty well so I'm just going to leave it like this um just because the the the order that they're going in now I think is working pretty good so we don't have to worry about weird that index things of strange overlaps and everything happening which is great do with this what you will uh cuz it's definitely just sort of like here's a fun thing that we can do and I want to leave it a little bit more open for interpretation for you to be able to take this and do more with it and make it more awesome um and cuz you know this specific use case is probably a little bit limited but something fun you can definitely play around with and if you enjoy this style of video where it's maybe a little bit less polished than my other ones I'm definitely experimenting a little bit with that where it's like here's this cool thing I found I just want to talk about it if you like it please let me know down in the comments to do more of these the other videos are definitely not going away I'm still going to be doing those as well but if you do like these and you want to see more a little bit faster a little bit more focused on like one thing or two things we looked at a few I think fun CSS things along the way here uh but do let me know if you appreciate this type of content as well so then I know if I should continue making it or not 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