Blurry Effect: CSS Tutorial (Day 29 of CSS3 in 30 Days)

Key Takeaways

hey everybody welcome back to css3 in 30 days today's day number 29 and we're going to just do something a little simple we're going to be creating a blurry depth of field blur your images unblur your images effect whatever we want to call it essentially you can make images and elements blurry and transition in and out of that blurred effect to whatever degree that you wish with just css3 now typically before you'd have to do this with photoshop or maybe even like a jquery plugin or something like that but we can do that in css3 and it's really cool now it's quite simple in its you know in its basic form but you can do a lot with it if you had layered elements and you wanted certain elements to be blurry in the background and certain ones be to be focused in the front like a legitimate depth of field effect where your your focus point is on a specific layer and then the other ones come in and out of focus you can play around with that but in this case i'm gonna show you just simply how the blur effect works and we're just gonna to blur and unblur and transition in and out of that with css3 so here we go day 29 the blurry effect so we just have four images here that are just standard stock images but down here what we're going to do is we're going to have them start out as blurry once we kind of hover in view and then when you focus on one it will kind of come forward and be it within focus with the other ones be being blurry in the background when we hover out of that it should go back to its blurred state and we can also hover to a different one it will switch and now that one is in focus this one is in focus this one is in focus a good uh practical example or practical use of this specific demo would be um perhaps portfolio images or a gallery of images now the blur effect here is quite dramatic now you don't have to have it be that dramatic of a blurred effect but maybe in some cases that might be what you want so let's jump into our code editor download day number 29 and then as you can see in our markup here uh we simply just have four images there's nothing crazy about this at all it's quite simple head to your sandbox and let's start coding so we're gonna select the depth gallery that is the div that wraps the four images and we're simply just going to position relative and then display inline block then we're going to select the depth gallery image so all the images we're gonna give them a border of solid let's do eight pixels or seven doesn't really matter white box shadow we're to go 0 0 5 pixels and then rgba 0 0 0 and then 0.3 and then we'll say cursor pointer because we're hovering over it we want that interaction you don't have to you can change it to crosshair let's do that that'd be fun and we're going to say transition we're going to transition the filter property because we're going to be using css3 filter property i'll show you in a moment here 0.3 seconds linear we're also going to transition the transform property at 0.3 seconds and linear as well save that now if you go to our browser you can see the images now have a nice little like a nice border a white a white border around it with a little bit of a shadow it's just a nice a nice way of displaying an image just makes it look nice gives it a frame now we're gonna go back here we're gonna say depth gallery hover when you hover over the entire depth gallery and then image so when you hover over that element the entire pyramint element parent element do something with the images and that's simply going to be filter so we can apply some graphical effects we're going to say blur and then 5 pixels so that's how you do that that's how you blur an image check it out so when i hover it in there so i'm out of the element itself when i hover into that element it's going to blur everything 5 pixels now you can have it be more exaggerated or less exaggerated by changing the value higher or lower this is one pixel very subtle and if i did 10 pixels you can't even recognize what the image is really so there we go i'm going to stick with let's say 4 pixels and i'm going to transform it and i'm going to use the scale value here and scale is simply just the size the scale of it don't want to be one would equal it's not going to do anything it's going to be its normal size 0.9 is 90 of its size both height and width you can have it be 2 and it'll be twice the size so you can scale an element any element using transform scale save it now when i hover into the depth gallery everything shrinks point nine and goes blurry to four pixel blur effect okay and the only thing we have to do now is when you hover over say depth gallery image and then hover over an individual image we're going to filter we're going to overwrite that filter property and blur to zero so just back to a standard in focus image transform scale and then 1.1 and because we're transitioning the images everything is got a nice kind of fluid transition in between so save it now let's check it out we hover it in everything goes down to 0.9 and goes blurry you hover over one comes up into focus and is a little bit larger when you hover out onto a different one one goes back one comes forward nice and simple so that's it for today's demo for the blurry effect we simply played around with filters the filter blur and the transform scale you could do everything from transforming and rotating upon that uh when you hover but because this was about blurring images we're simply using the filter blur effect i challenge you to take this a little bit further i showed you how to use the blur and transition in between in focus and everything like that but i challenge you to do something exciting with this maybe have the images individually be stacked in front of each other have them be cascading out in front of each other so you could see an image and then one in front and a little bit down another one in front and a little bit down and so on and so forth and when you hover over that image you know maybe pop it out of like a deck of cards and have it come in focus and the other ones go blurry or maybe you you have separate individual png transparent elements like a scene you have maybe three trees or something like that and when you hover over one tree that one's in focus you hover over this one it's in focus the other two are blurry almost like if you're a photographer and you're you're photographing someone and you want to put a certain element in focus and have you know the background be blurry and the foreground be blurry but this one single plane of focus that's kind of what you're doing here so i challenge you to experiment with this and don't just leave it here i've given you the tool and now i want you to play with it a bit so see what you can come up with and i will see you in tomorrow's final lesson day number 30. so i'll see you there and have fun with the blur effect cheers [Music]