How To Create An Image Hover Effect With CSS

having image hover effects add an extra level of polish to your website and in this video i'm going to show you not only how to create a few different styles of image hover effects but how to create any style at all that you want and combine them all together [Music] welcome back to web dev simplified my name is kyle and my job is to simplify the web for you and in this video i'm going to show you how to create all of these awesome css hover animations and something interesting you'll know about them is i was able to mix and match a bunch of different animations this one for example blurs the background and fades in the text this one zooms the background and fades in the text these ones all slide in the text and fade in the background from different directions this one slides in the text and it also zooms and fades the background and this one changes the background to grayscale and you can combine together all of these however you want and even create your own it's going to be a very modular system so to get started we need to create an html page that's going to house all of our html with all of our images and inside here we're essentially just going to create a giant css grid so to do that we're just going to create a div with the class of grid and then we're going to create another div for each one of our images we're going to give this a class of image wrapper and this image wrapper is really important because the way these hover effects work is you're going to have a div that is essentially the size of your image and then there's going to be an image inside that div and then there's going to be this text content that's also inside that div and what you need to do is just position these elements directly on top of each other hiding one and showing the other so you're going to hide the text and show the image and then when you hover over the image wrapper this div right here you're going to show the text over top using whatever animation you want so inside here we're going to have both an image and we're going to have our text so our image here for our url we're just going to be using a site called pixem which allows us to create random images we're going to give them a dimension of 500 pixels and i'm putting this random one at the end so that way you can make sure we always have a random image and it's going to be different every single time we don't have to worry about caching there we go we have our image and then we're going to create our content section which we're going to give a class of content and to create some placeholder text i'm just going to say something like lorem 20. that's just going to give us some placeholder text in the middle and now if we just open this with live server we can kind of see what we're working with so over on the site it'll open up in just a second and you can see we have an image and then we have some text down below that image pretty straightforward stuff we're going to copy this down essentially a bunch of times i'm just going to copy it a couple times for now and i want to change this random to a new value each time so we can get a different image so you can see we have three different images and we have some text and i'm covering up a little bit with my camera but that's okay because we're going to move these into the correct position so what i want to do is i just want to come in here with a style sheet where we're going to put our styles and i'm going to link that in our html we'll just say link of that style sheet called styles.css now the very first thing i want to do inside of here is i want to take our body i want to set the margin to zero and then i also want to set the margin on the bottom to 25 rem that may sound weird but i'm just doing that so i can scroll down far enough you can see everything even with my camera in the corner now the next step that we want to do is we want to style our grid and our grid is actually really pretty straightforward we're going to change the display here to grid and we're going to change our grid template columns we want to have this be a repeat with auto fit so we can just say auto fit that's going to make sure that it automatically adds as many rows as it can or as many columns as it can and we're going to specify our columns to have a min max size here so our minimum size is going to be 300 pixels and our max is just as large as it could possibly be now you can see these two images are side by side because we have enough room for two 300 pixel images side by side but if we shrink our screen down you can see that now we can only show one image so as we expand we can now show more images i think that looks pretty good now the next thing we want to do is to style that image wrapper and like i said to make this work we need to have our image and our text on top of each other so to do that we need to use absolute positions so our image wrapper needs to have a relative position so we can put all the children inside of it in the right position if you're unfamiliar with how this position relative and absolute works i have a full video on it i'll link in the cards and description also i want to make sure all of our overflow is hidden that way if we have like a zoom in on our image it doesn't overflow outside our container it's just going to be hidden which is ideally what we want now we can work on styling the image which is just our image inside of that image wrapper we can also style our content so it's just our content inside of our image wrapper as well now these styles are going to be where things get a little bit more complex first i want to change our image to a display of block the reason for this is so i don't have to worry about having extra sizing because images are like inline which is a little bit terrible to work with in my opinion so by using block it's just going to be a little bit easier to work with also i can specify here a width of 100 because i want it to fill the entirety of that grid section also i want these images to be square so we're going to set an aspect ratio of one to one come over here we remove this our images don't have that aspect ratio by default but we add the width and aspect ratio and now they have that perfect one-to-one aspect ratio the next thing i want to do is i want to set my object fit here to cover and the reason for that is if we have like oddly shaped images that aren't all the same size this is going to make sure they fit perfectly and we also want to set the object position here whoops object position to center and that just means that if we have an oddly sized image it'll fit good and it'll focus on the center of the image and the rest will just overflow over the edges which is perfectly okay now the next thing that we need to do after that is to worry about our content because that's kind of how our image needs to be styled our content is the thing we want to position absolutely so we'll say absolute and we're going to set an inset of zero what that does is it sets the top left and right property to zero so essentially it fills our entire containers as you can see our text right here is inside of that container just like we expect let's make it a little bit bigger also i'm going to choose change the font size here so we'll say font size 2 rem just so our font is a lot bigger and easier to see so now you can see our font is on the screen it's much larger and easier to read also to make this a little bit easier to read what i want to do is i want to add in some padding so let's say padding of one rem and for now i'm going to add in a background which is just going to be a partially transparent white background so let's say 255 255 255 and 0.4 now if you look we can see that we have that partially transparent background and that makes it a lot easier to read our text and then to center everything we're just going to use a simple deflate display flex justify content in the center and we're going to align our items in the center that's just going to center our text in the vertical and horizontal direction now the very last thing that we need to do is we need to select both our image itself and we want to select the image wrapper and we want to get the content inside of that and what we want to do is we want to set a transition and the reason i'm doing this on both of them is because the transition needs to share the exact same timing so in our case we're going to say transition that's 200 milliseconds and ease in ease out so what's going to happen is all of our properties that we're changing for example by fading in and out the text or by making it so that the image zooms or so on they're all going to last 200 milliseconds and it's all going to have the same timing curve so they all just match up really well with each other as you can see over here when we hover everything goes at the exact same speed so as soon as the image finishes zooming the actual text comes in at full transparency so it's going to make it a lot easier to work with all of our animations and speaking of animations let's work on our first style of animation we want which is going to be for fading in our text so we're going to say if we have our image wrapper and we hover over top of it what we want to do is we want to take our content and if the content has the fade class then we want to do the fade in and out animation so here i just want to set the opacity to be one and i want to copy this selector one more time and when we're not hovering i want the opacity to be zero so by default if we have this fade class added to our content which we're going to put on this first one it's going to have an opacity of zero you can see it doesn't show up but when we hover it now adds that opacity of one and it's going to do the transition over 200 milliseconds to make it fade in that looks really good obviously the text is a little bit hard to read because our image is very stark and it's got a lot of contrast so we want to add a class onto our image here and this class for our image is just going to be something like blur this is going to be for blurring out our image so now in our styles what we can do is we can select our image wrapper again and this time i want to get the image and this time i want to get it when it has that blur class so if we are hovering over our image and we have that blur class i can take in here a filter and this is just a css filter that we can apply and i can just say hey i want to blur this by 5 pixels let's say 5 pixels now when i save when i hover over this image you can see the images blurs out we can really see this if i just come over here and i comment out this content for now and i hover over my image you can see the image gets blurry and depending on the value you put 5 pixels 10 pixels 100 pixels it's going to make it more or less blurry you can see if we make this 50 pixels the blur is going to be insane well if we put it at like 1 pixel it's going to be a very small blur i think in our case 5 pixels is pretty good so we'll leave it at five pixels let's bring the content back in so now if we hover you can see the image blurs out in the background and our text shows up and it's pretty easy to read the next thing i want to work on is going to be that zoom animation that i talked about so we can come down here for this class and we can give this a class of zoom and our content we're just going to do the same exact fade animation so right now this text is fading in and out but we want to zoom our image in so we can come over here we can just copy this image wrapper for hover or for blur i'm sorry we can change this to zoom and what i want to do here instead of doing a filter is i want to do a transform so i can say transform and i want to transform the scale in the scale here i want to increase by 10 so by saying the scale is 1.1 it's increasing the size of the image by 10 and now when i hover you can see it zooms that image in by 10 and the best part about all this if i come over here and i say you know what i want this to zoom and fade well i just add the fade class to my image and now it's going to zoom in and it's going to fade i'm sorry not fade blur if i wanted to zoom and blur i just add the zoom and the blur class so now when i hover you can see it zooms in and blurs that image so it's a lot easier to read our text and has a really cool effect and over here we're just doing the blur now in this next piece of content down here what i want to do is i want to make this a slide in in our case we're going to do like a slide from the left so we're going to say content and we want this to be a slide left we're going to make our class on our image here equal to blur because by default we're just going to do that blur animation and in our styles what we want to do is we're going to just copy this right here and we want to change fade to be slide left and fade here to be slide left so when we are not hovering we want our text to be all the way to the left side of our screen so to do that we can take our transform and there's a property called translate in the x direction we can set it to negative 100 what that's going to do is it's going to make our text view all the way off the right the left side of our screen by 100 of its size we change this to 90 you can kind of see what i'm talking about 10 of our text is still showing with negative 100 it's entirely off the edge of the screen now we can do is we can take our translate x change it back to zero and what that's going to do is it's going to animate this in from the left when we hover as i hover you can see it animates in from the left that looks really good we can do the same thing for all the different directions so i'm just going to copy this down four times we're going to have slide right and slide right is coming from positive 100 percent and over we're going to have slide up like this and that's going to be coming from the y direction so make sure that these are y and we're going to have a slide down so let me just copy that down again this is coming from the y direction and this is going to be a positive 100 percent there we go now if i just copy this image wrapper here a couple times we'll copy it down three times one two three and i want to change this to be slide right this one slide up and this one is slide down so now what we can do is make sure that these images are all different so we'll say three four five and six so now we have different images we should have a left a slide this one slides in from the right this one should slide up but it's actually sliding down and this one should slide down but it's actually sliding up so let's just flap these around slide up should be down and slide down should be up just so we have these the right orientation so now this is sliding up and this is sliding down that looks really good now the last filter that i kind of want to talk about is going to be a filter for our image again and this one's going to allow us to do a grayscale image i'm just going to copy our blur here because grayscale is very similar to blur i'm going to change this to just the text of gray and here we can say grayscale and we can specify whether or not how much gray scale we want between zero and one one is a hundred percent grayscale now what i can do is i'm just going to copy all this here paste it down and instead of blur we're gonna change this to gray and for now i'm just gonna comment out this content so now if we scroll down you can see when i hover my image it becomes that grayscale color if i put a content over top of that you can now see that it's becoming grayscale and sliding in from the top and just kind of a cool effect on our image and that's all there is to these hover effects you can really go about customizing these however you want which is super powerful also if you want to see a really cool way to make modular cards in css i'm going to have that linked over here it has the same power as these hover effects where i show you how to do it and how you can expand upon it with that said thank you very much for watching and have a good day

Channel: Web Dev Simplified

Views: 70,464

Keywords: webdevsimplified, css image hover, css image hover animation, css animation, css image, css image hover effect

Id: tF3RE5CGt9U

Length: 12min 39sec (759 seconds)

Published: Sat Jan 22 2022