Código para jugar 1.

<div class="contenedor"><img src="https://placehold.jp/300x300.png"/><div class="caja-efecto"></div></div>

<style>.contenedor{width:300px; height:300px; border:1px solid #ddd; margin:0 auto; overflow:hidden;} .contenedor img{display:block; width:300px; height:300px; webkit-transition: 1s; -o-transition: 1s;transition: 1s;} .caja-efecto{width:300px; height:300px; background:rgba(0,0,0,.2); position:relative; top:-300px; backdrop-filter:grayscale(1) contrast(1.3); opacity:0;webkit-transition: 1s; -o-transition: 1s;transition: 1s;} .contenedor:hover img{transform:scale(1.5) rotate(10deg);
;webkit-transition: 1s; -o-transition: 1s;transition: 1s;} .contenedor:hover .caja-efecto{opacity:1;webkit-transition: 1s; -o-transition: 1s;transition: 1s;}</style>