Image hover effect using CSS filters

In this article, we are going to explore the Different kinds of Image hover effects using CSS filters (grayscale, blur) and CSS3 scale method of transform property.  By using grayscale filter we can create the black – white image hover effect and By using blur filter we can create the blurred image hover effect.

By using scale method of transform property, we can create the zoomIn – zoomOut image hover effect.

Circular Image hover effects are the very nice way to display the author pictures at the end of the blog posts in the articles with different effects.

The different effects we are going to see in this Demo is achieved by using CSS filter methods and CSS3 scale method of transform property.

let’s start coding

1. First, Consider a div with id:wrapper and inside it consider a twelve div elements with same class:image-holder and inside the each div element consider an image with different classes, For first three images set class as img-1, for the next three images set the class as img-2 , next three with img-3 and last three with img-4. very soon you will come to know the reason behind the usage of the different classes.
2. Now style the parent div element with id:wrapper by setting its width to 700px , padding to 10px, margin to 20px auto to make the content lie at the center of the browser and overflow to hidden so that the extra content lies inside the div element.

   #wrapper {
     width: 700px;
     padding: 10px;
     box-sizing: border-box;
     margin: 20px auto;
     overflow: hidden;
   }
   

3. Now style the div elements with class:image-holder by setting its width and height to 200px and float to left and  overflow to hidden so that, image don’t get overflow from the div in zoom-in-zoom-out effect. and set the border-radius to 50% to get the circular/rounded effect.

   .image-holder {
     width: 200px;
     height: 200px;
     margin: 8px;
     float: left;
     cursor: pointer;
     border-radius: 50%;
     overflow: hidden;
   }
   

4. Now set the image width and height to 100% and border-radius to 50%

   .image-holder img {
     width: 100%;
     height: 100%;
     border-radius: 50%;
   }
   

To achieve the Black-White Image hover effect

1. Style all images with class:img-1 by setting its grayscale method value to 1 and so that  all images with class:img-1 turns into the Black color. and add the transition property for the smooth effect.

   .image-holder .img-1 {
     filter: grayscale(1);
     transition: 0.5s ease-in-out;
   }
   

2. Now on hover, all the images with class:img-1 should turn into the color, to achieve this effect set the grayscale method value to 0

   .image-holder:hover .img-1 {
     filter: grayscale(0);
     transition: 0.5s ease-in-out;
   }
   

To achieve ZoomIn-ZoomOut Image hover effect

1. To achieve the ZoomIn-ZoomOut effect, set the value of the scale method on hover to transform: scale(1.2, 1.2); and add the transition property for the smooth effect.

   .image-holder .img-2 {
     transition: 0.5s ease-in-out;
   }
   
   .image-holder:hover .img-2 {
     transform: scale(1.2, 1.2);
     transition: 0.5s ease-in-out;
   }
   

To achieve ZoomIn-ZoomOut and Black-White Image hover effect

1. Style all images with class:img-3 by setting its grayscale method value to 1 and so that all images with class:img-3 turns into the Black color. and add the transition property for the smooth effect.

   .image-holder .img-3 {
     filter: grayscale(1);
     transition: 0.5s ease-in-out;
   }
   

2. Now on hover, all the images with class:img-3 should turn into the color, to achieve the color effect set its grayscale method value to 0 and to achieve the ZoomIn -ZoomOut effect set its scale method of the transform property.

   .image-holder:hover .img-3 {
     transform: scale(1.2, 1.2);
     filter: grayscale(0);
     transition: 0.5s ease-in-out;
   }
   

Note: Previously we have set the all images overflow to hidden, the reason behind it, on hover the width of the image would increase to avoid the overflow of the images from its div. we have to use the overflow property.

To achieve Blurred Image hover effect

1. Style all images with class:img-4 by setting its blur method value to 4px and so that all images with class:img-4 turns into a blur. and add the transition property for the smooth effect.

   .image-holder .img-3 {
     filter: blur(4px);
     transition: 0.5s ease-in-out;
   }
   

2. Now on hover, all the images with class:img-4 should turn into the Normal image, to achieve this effect set its blur method value to 0

   .image-holder:hover .img-4 {
     filter: blur(0);
     transition: 0.5s ease-in-out;
   }
   

check out the demo

See the Pen black and white image hover effect by rajeshdn (@cool_lazyboy) on CodePen.

• Author
• Recent Posts

Rajesh DN

Rajesh Dn is a UI developer at TCS. he likes exploring new technologies and likes hanging with friends and surfing youtube in his spare time.

Latest posts by Rajesh DN (see all)

• CSS Speech bubbles - July 20, 2020
• Simple Button Hover effect – Border Hover effect - October 9, 2017
• Glowing Social icons hover effect - September 11, 2017