Image Hover Animation in HTML & CSS

In this shorts you will learn to create micro Image Hover Animation in HTML & CSS

#imagehoveranimation #htmlcss

[marolterr]

.wrapper {
height: 220px;
border-radius: 50%;
overflow: hidden;
border: 6px solid #fff;
}
.wrapper img {
height: 100%;
width: 100%;
border-radius: 50%;
filter: grayscale(100%);
transition: 0.5s ease;
cursor: pointer;
}
wrapper img:hover {
transform: scale(1.3);
filter: grayscale(0%);

<div class="wrapper">
<img src="img.jpg">
</div>

[_approx]

any idea to put it in the middle of the website?