Image hover effect: black and white to color

This technique will work if you are doing it in Bootstrap Studio or writing design code. in HTML or any HTML framework.

Don't know what is the bootstrap studio is? Visit: What is Bootstrap Studio and Learn Bootstrap Studio a No-Code web designing tool.

Let's get started!

First will start by adding an image to our project, which will look something like this <img src="keet classroom.jpg" /> Now let's move to CSS! I recommend you create a new .css file for this. But if you, do it in an existing file it will still work, no worries!

Here we must create two classes, one is for the default value, and one is after hover. So, let's first create a default value.

.gray-clr {
  filter: grayscale(100%);
  transition: 0.5s;
}

Here I create a class by the name gray-clr you can name it whatever you want but if you are following me, let's continue with the same name.

In this CSS we have given a grayscale value of 100% and a transition of 0.5 seconds. Transition means if there is any activity or interaction it should take 0.5 seconds to complete the transition. And because of this effect, we will get a smooth transition.

The second class which I am going to create is for the hover effect. Here, we must use the same class name with a small modification. We must add :hover after the class name without any spaces. It will look like this.

.gray-clr:hover {
  filter: grayscale(0%);
}

Now the most important thing. Call the class in the HTML image tag. You write class="gray-clr" right before src <img class="gray-clr" src="keet classroom.jpg" />