Black and White to Color image hover effect

black-white-color-effect
In this article, we are going to explore the Black and White to Color — Image hover effect and as well as, we are going to see few more different effects — Zoom-in and Zoom-out effect, Blur effect and Zoom-in Zoom-out Black and White to Color 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. there are many  CSS filter methods are available, But mostly we are going to use the grayscale, blur and CSS Scale method.

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 and White to Color effect

black-white-color-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 Zoom-in and Zoom-out effect

black-white-color-effect

  1. To achieve the Zoom-in and Zoom-out 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 Zoom-in Zoom-out Black and White to Color effect

black-white-color-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 Zoom-in and Zoom-out 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 hidde, 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 Blur effect

black-white-color-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.0

Author: 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.

2 Thoughts

  1. Hi. Your Blogs are good, you can post more of Java and of Angular types, though I had read 2 of your Articles like Angular, and one of JSON, but would be looking to your Articles like of Java, or creating a screen through Modal, tooltip etc.

Leave a Reply

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