Up next in 10
How To Create An Image Hover Effect With CSS
2K views
Feb 7, 2024
"How To Create An Image Hover Effect With CSS" is a tutorial video demonstrating the process of adding interactive hover effects to images using only CSS. Throughout the video, viewers are guided step-by-step through the creation of various hover effects, such as grayscale, color overlay, zoom, and opacity changes. The tutorial covers essential CSS concepts, including selectors, transitions, and pseudo-classes, allowing viewers to customize and apply hover effects to images on their websites or applications. By following clear demonstrations and explanations, viewers can learn how to enhance the visual appeal of their images and create engaging user experiences through interactive hover effects. Whether you're a beginner exploring front-end development techniques or an experienced designer seeking to add flair to your projects, this tutorial offers valuable insights into creating image hover effects using CSS.
View Video Transcript
0:00
Having image hover effects add an extra level of polish to your website and in this video
0:04
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
0:15
Welcome back to web dev simplified. My name is Kyle and my job is to simplify the web for you and in this video
0:20
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
0:27
Animations this one for example blurs the background and fades in the text
0:31
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
0:37
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
0:43
Combine together all of these however you want and even create your own. It's going to be a very modular system
0:48
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 of here
0:54
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
1:02
Images we're gonna 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
1:09
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
1:14
That's also inside that div and what you need to do is just position these elements directly on top of each other
1:19
Hiding one and showing the other so you're gonna hide the text and show the image and then when you hover over the image
1:24
Wrapper this div right here. You're going to show the text over top using whatever animation you want
1:29
So inside of here, we're going to have both an image and we're going to have our text
1:33
So our image here for our URL, we're just going to be using a site called pixum, which allows us to create random images
1:38
We're going to give them a dimension of 500 pixels 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
1:45
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 gonna give a class of content and to create some
1:53
Placeholder text. I'm just gonna say something like lorem 20 That's just going to give us some placeholder text in the middle
1:58
And now if we just open this with live server, we can kind of see what we're working with So over on the side, it'll open up in just a second
2:03
You can see we have an image and then we have some text down below that image pretty straightforward stuff
2:07
We're going to copy this down essentially a bunch of times I'm just gonna copy it a couple times for now and I want to change this random to a new value each time so we
2:14
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
2:20
But that's okay because we're gonna move these into the correct position So what I want to do is I just want to come in here with a style sheet
2:25
Where we're gonna put our styles and I'm gonna link that in our HTML We'll just say link of that style sheet called styles dot CSS
2:32
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 0 and then I also want to set the margin on the bottom to 25 REM
2:40
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
2:45
Now the next step that we want to do is we want to style our grid and our grid is actually really pretty straightforward
2:50
We're gonna change the display here to grid and we're gonna change our grid template columns
2:54
We want to have this be a repeat with auto fit so we can just say auto fit
2:59
That's going to make sure that it automatically adds as many rows as it can or as many columns as it can
3:03
And we're gonna 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
3:12
Now you can see these two images are side by side because we have enough room for two 300 pixel images side by side
3:17
But if we shrink our screen down you can see that now we can only show one image
3:21
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
3:27
And like I said to make this work, we need to have our image and our text on top of each other
3:31
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
3:38
If you're unfamiliar with how this position relative and absolute works. I have a full video on it
3:42
I'll link in the cards and description Also on to make sure all of our overflow is hidden that way if we have like a zoom in on our image
3:49
It doesn't overflow outside our container. It's just going to be hidden which is ideally what we want
3:53
Now we can work on styling the image which is just our image inside of that image wrapper
3:58
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
4:08
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
4:15
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
4:20
Also, I can specify here a width of 100% because I want it to fill the entirety of that grid section
4:26
Also, I want these images to be square So we're going to set an aspect ratio of 1 to 1 come over here
4:31
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 1 to 1 aspect ratio
4:38
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
4:43
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
4:51
Here, oops object Position to center and that just means that if we have an oddly sized image
4:56
It'll fit good and it'll focus on the center of the image and the rest will just overflow over the edges
5:00
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
5:06
To be styled. Our content is the thing we want to position absolutely So I'll say absolute we're gonna set an inset of 0 what that does is it sets the top left and right property to 0
5:16
So essentially it fills our entire containers as you can see our text right here is inside of that container
5:21
Just like we expect let's make it a little bit bigger. Also, I'm gonna choose change the font size here. So we'll say font size
5:27
To REM just so our font is a lot bigger and easier to see now
5:30
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
5:37
So we'll say padding of 1 REM and for now, I'm gonna add in a background which is just gonna be a partially transparent
5:43
White background. So let's say 255 255 255 and a 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
5:52
And then to center everything we're just going to use a simple display display flex Justify content in the center and we're going to align our items in the center
6:00
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
6:08
Itself and we want to select the image wrapper And we want to get to the content inside of that
6:14
Now 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
6:18
Transition needs to share the exact same timing. So in our case, we're gonna say transition
6:22
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 to the text
6:30
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
6:36
So they all just match up really well with each other as you can see over here when we hover
6:39
Everything goes at the exact same speed So as soon as the image finishes zooming the actual text comes in at full transparency
6:45
That's gonna make it a lot easier to work with all of our animations and speaking of animations
6:49
Let's work on our first style of animation we want which is going to be for fading in our text
6:54
So we're gonna say if we have our image wrapper and we hover over top of it
6:58
What we want to do is we want to take our content and if the content has the fade class
7:02
Then we want to do the fade in and out animation So here I just want to set the opacity
7:07
To be 1 and then I want to copy this selector one more time And when we're not hovering I want the opacity to be 0 so by default if we have this fade class added to our content
7:16
Which we're gonna put on this first one. It's going to have an opacity of 0 you can see it doesn't show up
7:20
But when we hover it now adds that opacity of 1 and it's going to do the transition over 200 milliseconds to make it fade
7:26
In that looks really good Obviously though text is a little bit hard to read because our image is very stark and it's got a lot of contrast
7:33
So we want to add a class onto our image here and this class for our image is just going to be something like a blur
7:38
And 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
7:44
And this time I want to get the image and this time I want to get it when it has that blur class
7:49
So if we are hovering over our image and we have that blur class
7:53
I can take in here a filter and this is just a CSS filter that we can apply and I can just say hey
7:58
I want to blur this by 5 pixels Let's say 5 pixels And now when I save when I hover over this image, you can see the images blurs out
8:04
We can really see this if I just come over here and I comment out this content for now
8:08
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
8:15
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
8:20
While 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 5 pixels. Let's bring the content back in
8:29
So now if we hover you can see the image blurs out in the background and our text shows up in it pretty easy to
8:34
Read and the next thing I want to work on is going to be that zoom animation that I talked about so we can come
8:38
Down here for this class and we can give this a class of zoom and our content
8:42
We're just gonna 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
8:49
We 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
8:57
So I can say transform and I want to transform the scale in the scale here. I want to increase by 10
9:02
So by saying the scale is 1.1 It's increasing the size of the image by 10
9:06
And now when I hover you can see it zooms that image in by 10% And the best part about all of this if I come over here and I say, you know what
9:13
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
9:18
I'm sorry, not fade blur if I wanted to zoom and blur I just add the zoom and the blur class
9:23
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
9:30
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 slide in and in our case
9:36
We're gonna do like a slide from the left So we're gonna say content and we want this to be a slide left. We're gonna make our class on our image here
9:43
Equal to blur because by default we're just gonna do that blur animation and in our styles
9:47
what we want to do is we want to just copy this right here and we want to change fade to be slide left and
9:52
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
10:00
So to do that we can take our transform and there's a property called translate in the X direction
10:05
We can set it to negative a hundred percent What that's going to do is it's going to make our text view all the way off the rights the left side of our screen
10:11
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
10:18
It's entirely off the edge of the screen Now we can do is we can take our translate X
10:23
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
10:28
I hover you can see it animates in from the left. That looks really good We do the same thing for all the different directions. So I'm just gonna copy this down four times
10:35
we're gonna have slide right and Slide right is coming from positive 100% and over we're gonna have slide up
10:43
Like this and that's going to be coming from the Y direction So make sure that these are Y and we're gonna have a slide down. So let me just copy that down again
10:52
This is coming from the Y direction and this is going to be a positive 100
10:57
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
11:06
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
11:17
four five and Six so now we have different images. We should have a left slide. This one slides in from the right
11:26
This one should slide up, but it's actually sliding down and this one should slide down, but it's actually sliding up
11:30
So let's just flop these around slide up should be down and slide down should be up just so we have these the right orientation
11:36
So now this is sliding up and this is sliding down That looks really good
11:40
And the last filter that I kind of want to talk about is going to be a filter for our image again
11:44
And this one's going to allow us to do a grayscale image I'm just gonna copy our blur here because grayscale is very similar to blur
11:50
I'm gonna change this to just the text of gray and here we can say
11:54
Grayscale and we can specify whether or not how much grayscale we want between 0 and 1. 1 is a hundred percent grayscale
12:00
Now what I can do is I'm just gonna copy all this here Paste it down and instead of blur we're gonna change this to gray and for now
12:07
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
12:13
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 it's just kind of a cool effect on our
12:20
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
12:26
Also, if you want to see a really cool way to make modular cards in CSS I'm gonna have that linked over here
12:31
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
12:36
That said thank you very much for watching and have a good day
#Clip Art & Animated GIFs
#Flash-Based Entertainment