Blur Effect Tutorial: Blur everything except the Hovered using Html and Css


hi guys it’s me
CSS coder and in today’s tutorial we will talk about how you can get a blur
effect on the images when you hover on one of the image so let’s see how it
works see when I hover over the first image all the remaining images gets
blurred when i hovered over the second one on the remaining gets blurred it works
same for all the images so let’s explain it in a step-by-step manner how we can
get such a desired result step one is we will add six pictures from unsplash step
two we will add a parent class four images to show them in two rows three
images each column like three images in each column and number of rows will be
two for this result we will use CSS grid step 3 for each image we will use a
class called child step 4 to get the desired result we will add opacity to
each child when we hover on one of them like as you see before when we hover on
the image all the remaining gets blurred so this desired result can be achieved
through opacity so let’s jump to write the code for it now we are in the vs
code and we will start writing the code for it first div with a class of parent now we will use six divs with six images
in it so div with a class of child into six images in it you’ll see how it works each div has a class of child and there
is an image insert in it for images we will use unsplash so I have an image here I
will copy it and paste it to the first image now I will save it see how it works the first image is
uploaded I will paste one here one here one here one here one here now save it
let’s see we have six images but all the images are same so we will change the
number of it will be 2 0 1 the second image will be change it will be 2 0 2 2
0 4 let’s see how it works sorry for slow internet connection
the images are loading on the server all the six images are loaded see now let’s
write CSS for it first of all we will write some coding for the body we will
give the body a background color of #004445 save it see the body color
has changed now we will give it a height so it will be 100vh we use 100vh to
fill it the whole screen now to Center the images we will use grid display the
images as grid we will align them center justify content center see all the
images gets center now we will give the color of black so if we have any text on it it will be
black now for parent is we have talked about it
we will have two rows and every row has three images in it so to get such result
we will use grid for it so display grid grid template columns so what we will
do we will write repeat three 1fr so let’s see
we have three images in one row and three in another row we will add a grid gap
between the images for example we will give it a 20 pixels gap so let’s see the image the
gap has been added in it now for child class we will add some transition to it like
as we have said earlier we will get the desire result result by using the opacity
so we’ll give the transition an opacity of 2.5 second .child so we will
give the child the child images a border radius of 3 pixel .child and we
will use a child selector and all the images in it they should have a border
radius of 3 pixel let’s see all the images have a border radius of 3 pixel now the
important part has come so we will use the hover state when we hover on the
parent element the child which is not selected like when we hover on the child
element it should not be get blurred and the
remaining gets blurred for this we will use :not into hover like it’s this
image is Hovered so don’t apply blurred effect on this one
when this one is Hovered don’t apply blurrness on this one now when image is hovered the remaining should
have an opacity of 0.5 now lets see when I however the first one the opacity of the
remaining gets to 0.5 now when i hover over the second one the
opacity gets to 0.5 for remaining images now let’s add some transform property to
it we want them to translateY when we hover on the image 3 pixel now save it and
see how it works see when I hover over the image the remaining gets blurred and the
Hovered one has a translateY of 3 px see all the images this works like this
hope you like this tutorial and you have learned something from it
if you guys loved the video give it a thumbs up and subscribe for more awesome
content thanks you

Leave a Reply

Your email address will not be published. Required fields are marked *