zoom + grayscale on hover

<style>
.pp {
overflow: hidden;
margin: auto;
min-width: 240px;
max-width: 240px;
width: 100%;
border: 4px double #FFDBE7;
border-radius: 10px;
}

.pp img {
transition: all 0.5s;
box-sizing: border-box;
max-width: 100%;
}

.pp:hover img {
transform: scale(1.3) rotate(12deg);
webkit-filter: blur(1px); /* Chrome, Safari, Opera */
filter: blur(1px);

display: inline-block;

width:100%;
height:auto;

border: 3px double black;
overflow: hidden; /* clip the excess when child gets bigger than parent */
}
.pp img {
display: block;
width:100%;
height:auto;
-webkit-filter: grayscale(0%);

}

.pp:hover img {
-webkit-filter: grayscale(100%);

}

</style>

<figure class="pp">
<img src="https://data.whicdn.com/images/359902270/original.gif">
</figure> <!---you can cut this part off if you have pro plus!--->