image hover effect using HTML and CSS

Here's how to create the image hover effect using HTML and CSS.

You can use this method for any image, but it's especially effective when you want to create a hover effect on an image of text.

[marolterr]

.container{
width:240px;
height:300px;
border-radius: 20px;
overflow: hidden;
cursor: pointer;

}

.container img{
width: 100%;
height: 100%;
filter: grayscale(.4);
transition: .3s;
}

.container img:hover{
filter: grayscale(0);
transform: scale(1.3) rotate(7deg);
}

[omaarshek]

Here's how to create the image hover effect using HTML and CSS.

You can use this method for any image, but it's especially effective when you want to create a hover effect on an image or text.

[tpermcubing]

What if I don't have an image in the container rather I have set the image as the background???