Webflow CMS hover interaction

in this video we'll be building a cool collection list hover interaction that's a little tricky if you get this one detail wrong stick around and I'll show you how to build it hi my name is Chris and I'm a designer and developer and today we're going to be building a cool brutalist type 80 Zine site and uh and that site is going to have a really cool collectionless interaction that's just a little tricky uh if you don't set the interaction on the correct element so it's a hover image appear interaction and it's really cool so first we're gonna just hop in the webflow in figma and build out the design and the layout and then we'll be doing the interaction uh okay cool let's get into it okay here is my glorious glorious figma design file that is so well organized um but we're just going to do a quick overview of what we're going to be building here so we got this sort of like uh brutalist maybe editorial type design with like a hand you know design feel a little grit um and it has this cool hover interaction over here so when you hover over one of the index items um you get a highlighter effect and then a image of that 80s skateboard Zine cover so this is a design it's a simple and fun and uh let's get in and build it okay so here we're on webflow let's check out design real quick okay cool so let's start building this thing out our little div we'll call it section header and then we will give it a background color from that and then let's see what we've got here for like padding okay cool so we got some for that one and then let's do 24. divided by 16 REM so in the first video that I posted I had asked like I knew there was a way to like take a pixel value and do like a math problem and turn it into a rem solution and uh Kevin uh answered my question and the comments post and basically what you do is you just take the pixel value so in this case 24 and then divide 16 REM and there you go that's it so thank you again Kevin um all right and then we'll throw in our uh header components and I think we'll make this a grid yeah we'll make this a grid uh always change it to Rems one ram uh let's see here I think what are we gonna do this bounding box is a little too okay just do 80. uh let's see here yes divided by 16 REM let's see if that works like that okay cool and we'll throw in our little header here and throw in our image here okay that's right all right always gonna put dibs in grids because so I tried taking an element and dropping it directly onto the grid element and then taking another one and dropping it on the other side but it ended up like pushing it over here so to keep that from not happening put two dibs in or dibs in your grid and then you can hold down I believe it's command right there and drop it in grabbing the element holding command and then dropping in there and now you see how I can just directly place it in the grid as opposed to it like pushing it around or creating a new grid element so pretty nifty uh let's get our cool little illustrations and are texts so let's give this a class name of in header cool white and then how many pixels is this 145 a lot of pixels 45 divided by 16 REM boom and then I think it was like eighty percent let's see how that looks cool yeah that looks pretty good all right it looks like we have our header finished now we're gonna do our little keep rolling section so let's see here put another div in section keep rolling and always I always use dibs I don't use the section section element but always remember to go and change the tag of that for good HTML structure go in here and change this Okay cool so we got our sections we're good yeah always make sure always make sure to do that okay and let's see here so we got our section and let's throw in another grid yes yes yes yes yes yes throwing another grid yes I believe that's the way to do okay cool throw that in um we are going to make this stuff real close let's see if this works all right rename it to rolling grid and then you know again throwing in our div elements see here we'll call this one wheel wrapper and we'll call this one text wrapper and let's see here let's just drop in our images here our cool wheel and then drop in another element keep rolling okay cool and let's get these elements stacked on top of each other like so okay wheel wrapper let's give it a little Flex box and see what that does and then I think we're gonna absolutely position this one relative okay cool that's stacked on top of each other let's see here this if we want this element to take up 100 percent 100 percent elements all right let's adjust some sizing here and then we'll get it all centered out say about this element not image but wheel image and rolling image okay cool so we're stacked on top of each other but we want this to be like centered so let's see if we can do that here wheel wrapper real image and let's give this a see what that does it makes it larger now we need our images Okay cool so there we go but now we're breaking out of the parent element which is something we do not want to do so maybe we'll just take this back to Auto there we go Max with a hundred percent so let's give this some padding and sometimes it's all about just like massaging things until you get them so all right let's let me just take some like that so let's see here okay wheel wrapper rim okay we got some padding now let's get now let's see what's up with this wheel now let's go back to that 300 divided by 16 Ram all right it's larger now okay cool let's let's do some grid lines so we can see this okay cool all right we got some thickness going on with these grid lines and we'll be adjusting that a little bit um sort of doing the basic styling right now hmm uh we flexbox it so now it no longer now it like squishes it so we'll have to just give this a give the child element we got going on here okay this is our div we are going to be turning this into okay text wrapper 100 percent 100 making the flex items just take up their elements okay go back I want it centered yes okay that element is centered yeah actually let's not let's not Flex it just yet let me just put the text in there and uh rename text grid update that and again we're gonna throw in our stuff we've got our cool descriptive texts in there that I got from Wikipedia um okay let's throw in some padding instead see how that looks 216 REM yes need a lot more padding REM 2.5 Ram okay cool here we go we're getting some padding here and then yeah let's just like Center align this element because there's a little too much space going on over here or we up this pixel size what pixel we only got it like 16 on here but seeing it in webflow and I want to make the text larger so it takes up more space white space is great but we also need we also need to make sure that we're not giving it too much space okay cool warm in case all right let's see what this does this are do 24 16 REM about 1.5 now we're a little too large right there hmm that is too large okay okay let's adjust this padding right here bad okay let's we're gonna adjust this just a little bit there we go much better 1.2 okay cool we're looking good now we've got some white space but not too much white space and we're going to move this a quarter give it like a 0.3 0.4 okay nice all right great now let's take care of like these lines overlapping and we're creating thickness and we don't really want that we want everything to look nice and uniform so we'll have to like play around with where these lines end and begin so I'm going to take off this one the bottom one and this one right here and leave it on that one and I'm going to take this bottom one off too because we're going to be putting some uh some more elements with lines in them right here for like where the magazine the magazine layouts go so all right so that section's done yeah this actually does need a little bit more spacing I'm not liking that okay yeah space gotta love space okay let's see here all right now let's add our other section our our section zine index our little Zine index section okay cool and what our collection lists in there from Zine okay cool we got our collection items nice and let's give this we're going to rename all of this to zine collection wrapper Zine list and then zine item cool we're good to go all right now we're gonna throw in a div and we'll call it index div and we're going to give it 100 percent width and then we're gonna throw in some padding here padding of about one REM okay one room padding and let's throw in our our Neato lines get rid of the bottom one nice okay our lines are looking nice and even we've got our index div let's give it some padding over here so everything's nice and aligned okay nice and let's throw in our header oh our padding did not go through maybe it's not in there nope not in there cool all right let's get our text from name so we got the name of all our cool all these cool zines 80s skate zines okay and these are caps first I don't know if boom love that styling and webflow it's not bold it's normal and we're at like what is it 56 I'm working so much faster with that cool that cool math problem all right okay cool awesome let's see here all right so we got our index going and now we have this fun interaction where you if you hover over something then if you hover over the the CMS item then the like an image of the magazine appears which I think is a cool interaction so in order to do that we're gonna have to give let's give the collectionless wrapper because we could do it on the section or we could do it on the wrapper itself but it looks like the wrapper is taking up the full width of the section so let's just affect that styling relative now we're gonna throw in and let's throw in our div and we'll call it Zine image wrapper called scene image wrapper and then we'll throw in the image and we'll get the images from Zine cover and that is huge it's ginormous uh let's see here let's give it the class zine image and let's just give it see what this sizing is foreign cool that looks great all right and we want this all to stack on top of each other actually let's not do it we'll give it on the the zine wrapper and just have it take up that with okay nice all right and now we're gonna pin everything down to the bottom absolutely position it down here cool and then we'll add a transform to these about I Almost Do say 32 and 32 so minus 2 REM minus 2 REM okay cool nice all right we're looking good um let's just finish designing everything and then we'll throw in the interactions we got our little footer section call it zine footer give it the background color black again we'll add that padding 16 REM and cool we got in our padding and some in our little div throw in our paragraph text footer text make it white and let's let's put a flex box on our footer see if that did not do what I wanted it to do nope did not do that so this is what we'll do instead if we don't want our boxes going past a certain point we'll just set a Max width on that container that holds the text okay cool there we go footer text and I know the spacing is a little tighter in there I might change that depending on readability it's kind of a little hard to read right here but let's just we'll set it to one yeah it's a bit tight and everything's capitalized so yeah let's get some spacing in there it's good if you need to adjust designs like once you see them like live on the web go for it um and then we're 14. so we're a little bit smaller get in our copy and I'll just move myself magically move myself over here so I can see what I'm doing okay nice it's looking good all right this is going to be a link like link and Link all right we're Linked UP linked up and ready to go okay that's the design so let's create this cool interaction so the interaction is going to be I hover one of over these index items right here and then this image appears and then there's sort of like a green highlighter effect that happens like so so that's what we're trying to go for so um so in order to do this this can be a little tricky but in order to be in order to to make this work is you would think that you would apply it you the interaction to this div actually you need to do it to the item itself The Collection item itself otherwise things go funky and I'm not sure why it does that but so let's do it let's do it Mouse hover class Zine item start an animation Mouse hover in okay cool and we'll do the div background color initial state and only children background color let's get that cool green love neon green it's very Punk very 80s all right nice we'll add just a little ease in there 0.3 nice okay cool and then we'll take our Zine wrapper and we'll do opacity zero initial state opacity again throw it in there I will give it just an ease and see what that looks like but we'll make it faster we don't want it to look funky all right and we're going to want to just set these interactions to only children with this class because we don't want them all to appear so all right let's see how that's working nice cool there we go now we gotta do our hover out start an animation we will duplicate it and call it hover out and we're just going to delete these and then take this off of initial state nice and then let's add that easing oh ease this is opacity really fast 0.2 seconds I believe and then yeah another little ease and then we're point three nice okay cool let's see what we got nice that's fun I dig it all right you know what I might adjust this this design because I thought it would be more full screen on the figma file but it appears not to be that way so I don't want the user to see the image only clipped like you know I'll be it's like it's cut off when they're hovering it right away so let's just adjust where that positioning is just the size or the positioning what does that look like top yeah maybe we do top or top that's cool maybe it's like in the middle like this and see how that looks yeah yes that's better okay cool yeah yeah so I started off thinking the design would look cool right there thought it would be full screen but then we got into the nitty-gritty of it and we had to make adjustments and sometimes you got to do that but awesome cool that is the design right there and simple hover interaction okay cool see what it looks like live let's do the live version of it just waiting for it to publish in published land awesome that's super fun what a fun project to do cool I think maybe let's add some mobile responsiveness to this or some fluid responsiveness to this I'm going to our client first highly recommend The Client First um Chrome extension you get all this really rad all this like really awesome [Music] it's just little just a bunch of like this fluid generator that is just really awesome help make the fluid responsiveness yes oh it does not like that but let's just see what's up copy the clipboard go into our Global styles open up that code and I'm going to give it its own little and let's just call this the fluid responsive and it's always good to add these little notes in here to your code just so you can remember what this does so okay and let's see what that does nice that's fun sweet all right there you have it wow that was really fun and really really cool um if you like this video and got some value from it please hit the like button and subscribe and follow me on Twitter and Instagram I would greatly appreciate it stick around because I'm going to keep making content like this and we're just gonna keep going further and farther and deeper deeper into the webflow figma design hole so until then I'll see you guys next time alright bye

Channel: Christopher Nelson

Views: 1,244

Keywords:

Id: DtZj6Sov-iU

Length: 38min 42sec (2322 seconds)

Published: Sat Nov 26 2022