How to Webflow - Easy Hover Animations in Webflow

all right well Casey here with cl creative I'm teaching you webflow and web design one video at a time here on YouTube and today we're going to be talking about hover animation specifically hover animations with our cards super easy it's super simple and it can elevate your site and take it to the next level so let's jump into the computer and check this out [Music] now if you if you notice here in the in the computer we are on this kind of mock page that I've created Untitled uis where I've got all these different designs just to be you know transparent with you guys and if you haven't downloaded Untitled ui's Library yet in webflow I mean it is super powerful they have so much stuff in here and I was able to put this page together in just you know a few seconds so if you're looking for just some inspiration or an easy way to throw up a page for you know an ad or something like that that you're running Untitled UI will get you up and running super fast if we scroll down here to our blog section this is what we're going to animate today and so if you see if I hover over these nothing happens it's kind of bland it's kind of boring nothing real exciting about that at all but what we're going to do is we're going to elevate these posts and so if we click on there we're going to get all of our different items here and if you notice that each of these are the same class and so what we do to one is actually going to happen to the other when we use the hover animations in the way that we're going to be doing here on our project now if you use the interactions panel over here you can Target each of these elements differently but when it comes to blog cards you you kind of want them all to be the same so we're going to use the hover State all you have to do to do that is Select what you want to actually animate in this case I want to animate the whole card I want this whole card to pop out at us when we hover over that so I've highlighted the entire card I'm going to click on the drop down arrow over here in the selector and click hover this is going to give us the hover State and we're able to change up some of the CSS styles on that what we're actually going to use is transform so we're going to go down here to the bottom and the effects panel we're going to click on transform and we're going to click scale in my case I want these posts to actually come out at used to we want to scale them up now if you notice if I scale that up it gives me 1.1 just by moving this bar right here and when I hover over these that's quite a bit like I don't really like that effect that that is way too much for me and so you can actually fine tune this a bit you just click inside of the box and then usually I will go with like a 1.025 or even a 1.015 I find that that provides a nice subtle pop it's enough to show you that this card is actually scaling without it being you know way too much my opinion all right so we've created the hover effect it was that simple if I hover over these cards there you go the hover effect is there it looks a bit jerky though we need to clean this up still so the next step is actually to click back on the item this time we're not going to select the hover state but what we're actually going to do is we're going to go down to transition now it's important that you are clicking on the item that we have actually created the hover 8 on or you know you're you're affecting the class that we created the hover State on and so in our case we are because we did it on the actual item so you go down here to transition and you notice it gives you opacity right off the bat well we didn't change the opacity we actually transformed these cards we scaled them a bit and so we want to go up here and we want to find the property for skip for transform I'm going to click on transform and you notice that it's going to give us some durations 200 milliseconds and we can move this up you know really far and if we hover over our card you notice it's just nice and slow moving in and out that might be a little bit slow for your taste so usually I will go somewhere around like 200 250 maybe 300 that gives us a nice quick movement there at 250 300 starts to bring that movement down a little bit and make it a little bit more subtle for our purposes so that's how you put a hover on the entire card now one other thing that you could do is when you hover over this picture you might want this picture to move just a little bit as well and so we can create an overstate on the picture so we click in on the picture and the same thing we go over here click the down arrow click hover we're going to go down to transition or I'm sorry transform again and we're going to move that not move that excuse me let me put that back to zero we're going to scale that just like we just did and we're going to scale that up this time I'm going to leave it at 1.1 I'm going to show you why here in just a minute now when you do that you notice that the picture gets huge and that's not really the look that I'm going for I want the picture to stay within the bounds of the card and so in order for us to keep the picture within the bounds of the card so that it's not bleeding out of where the card is here and you would notice if you had a color down here that this picture is really bleeding out of the card what you have to do is you click on the picture and you want to make sure that you actually have a wrapper a div that is wrapping that particular picture and so in our case we do you notice that there's a div wrapping our picture and you can go up here into our size panel and you're going to click on overflow you're going to say overflow hidden now when we scroll over that picture it stays within the bounds of the card now the card is moving nice and slow and it has a nice transition to it but the picture doesn't if you remember how we affect that we click back on the class or in our case the picture that we created the hover animation on and we're going to go down again to our transition state we're going to click on the transition state and we're going to go back to transform because this is what we used in order to create this and in this case you know we could go up to 300 maybe in match our card or maybe you want to go where it's a little bit slower than the card maybe even slower than that say you know we really want this to move in slow when we hover over it and so here we're starting to get that slow movement at 500 and you know maybe we even want to go a little bit further up to say 700 and now we're really starting to get that movement now again you know this might be a little bit much for you and so you can go back to the hover State we can go back to our transform and we can begin to really narrow in what we want this to look like and so maybe I just want it to go one point and 0.05 instead of all the way up to 1.1 and so now we just get this kind of nice slow hover effect when we're hovering over our the top of our card here where we have the card coming up we have the image coming up and you know they they look nice together and so if we go out and we preview that we would see that we have our hover State on our cards all right well that's how you create a hover State on a card in webflow super easy super simple but it really does elevate your project and take it to the next level if you got some value out of this video would you smash that like button if you want to see more videos like this would you subscribe I'm putting out videos on a weekly basis on webflow and web design and if you're feeling super generous share this with one of your friends hope to see you on the next video foreign

Channel: CL Creative

Views: 483

Keywords: webflow, hover animations, animations, css animations, web design

Id: AQljtPYrZNQ

Length: 8min 53sec (533 seconds)

Published: Fri Feb 10 2023