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);
}

[@omaarshek4123]

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.

[@atcdiddly]

This was helpful. Thank you.

[@watermelon83-t]

thanks that was short and helpful.

[@vipinpandey631]

Awesome bro

[@gauravchaturvedi8932]

Thanks .

[@robinhooderfe8361]

nice hover effect

[@khuwab-nagri77]

thanks for uploading

[@tpermcubing8139]

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

[@Psixxpubgm]

fake