↳ ❝ [rotate & saturate when hover] ¡! ❞

<style>
.pp {
  overflow: hidden;
  margin: auto;
  min-width: 240px;
  max-width: 240px;
  width: 100%;
}

.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(100%);

  }


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


}

</style>

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