Как-то так:
.container {
width:50vw;
height:50vh;
}
<div class="container">
<svg id="svg1" version="1.1" xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
viewBox="0 0 300 188">
<rect id="rect1" x="20" y="17" width="255" height="153" fill="dodgerblue" >
<animateTransform attributeName="transform" type="rotate" begin="img1.mouseover" dur="0.4s" values="0 147.5 93.5;8 147.5 93.5" repeatCount="1" fill="freeze" />
<animateTransform attributeName="transform" type="rotate" begin="img1.mouseout" dur="0.4s" values="8 147.5 93.5;0 147.5 93.5" repeatCount="1" fill="freeze" />
</rect>
<rect id="rect2" x="20" y="17" width="255" height="153" fill="skyblue" >
<animateTransform attributeName="transform" type="rotate" begin="img1.mouseover" dur="0.4s" values="0 147.5 93.5;-6 147.5 93.5" repeatCount="1" fill="freeze" />
<animateTransform attributeName="transform" type="rotate" begin="img1.mouseout" dur="0.4s" v values="-6 147.5 93.5;0 147.5 93.5" repeatCount="1" fill="freeze" />
</rect>
<rect id="rect3" x="20" y="17" width="255" height="153" fill="skyblue" >
<animateTransform attributeName="transform" type="rotate" begin="img1.mouseover" dur="0.4s" values="0 147.5 93.5;4 147.5 93.5" repeatCount="1" fill="freeze" />
<animateTransform attributeName="transform" type="rotate" begin="img1.mouseout" dur="0.4s" v values="4 147.5 93.5;0 147.5 93.5" repeatCount="1" fill="freeze" />
</rect>
<image id="img1" xlink:href="https://i.sstatic.net/vylHA.png" x="20" y="15" width="85%" height="85%" />
</svg>
</div>
В качестве нескольких анимированных теней используются прямоугольники, которые изначально расположены под картинкой и при hover вращаются в разные стороны.
Центр вращения прямоугольников вычисляется с помощью метода JS getBBox():
<script>
let bb = rect.getBBox();
console.log(bb.x + bb.width / 2);
console.log(bb.y + bb.height / 2);
</script>
Update
Вариант с добавлением тени с SVG фильтрами
.container {
width:50vw;
height:50vh;
}
<div class="container">
<svg id="svg1" version="1.1" xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
viewBox="0 0 300 188">
<defs>
<filter id="dropshadow" height="250%" width="200%">
<feGaussianBlur in="SourceAlpha" stdDeviation="2"/>
<feOffset dx="1" dy="2" result="offsetblur"/>
<feMerge>
<feMergeNode/>
<feMergeNode in="SourceGraphic"/>
</feMerge>
</filter>
</defs>
<rect id="rect1" filter="url(#dropshadow)" x="20" y="17" width="255" height="153" fill="dodgerblue" stroke="dodgerblue" >
<animateTransform attributeName="transform" type="rotate" begin="img1.mouseover" dur="0.4s" values="0 147.5 93.5;8 147.5 93.5" repeatCount="1" fill="freeze" />
<animateTransform attributeName="transform" type="rotate" begin="img1.mouseout" dur="0.4s" values="8 147.5 93.5;0 147.5 93.5" repeatCount="1" fill="freeze" />
</rect>
<rect id="rect2" filter="url(#dropshadow)" x="20" y="17" width="255" height="153" fill="skyblue" >
<animateTransform attributeName="transform" type="rotate" begin="img1.mouseover" dur="0.4s" values="0 147.5 93.5;-6 147.5 93.5" repeatCount="1" fill="freeze" />
<animateTransform attributeName="transform" type="rotate" begin="img1.mouseout" dur="0.4s" v values="-6 147.5 93.5;0 147.5 93.5" repeatCount="1" fill="freeze" />
</rect>
<rect filter="url(#dropshadow)" id="rect3" x="20" y="17" width="255" height="153" fill="skyblue" >
<animateTransform attributeName="transform" type="rotate" begin="img1.mouseover" dur="0.4s" values="0 147.5 93.5;4 147.5 93.5" repeatCount="1" fill="freeze" />
<animateTransform attributeName="transform" type="rotate" begin="img1.mouseout" dur="0.4s" v values="4 147.5 93.5;0 147.5 93.5" repeatCount="1" fill="freeze" />
</rect>
<image id="img1" filter="url(#dropshadow)" xlink:href="https://i.sstatic.net/vylHA.png" x="20" y="15" width="85%" height="85%" />
</svg>
</div>
Последовательное появление теней
Каждая новая тень появляется с задержкой после окончания предыдущей анимации
.container {
width:50vw;
height:50vh;
}
<div class="container">
<svg id="svg1" version="1.1" xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
viewBox="0 0 300 188">
<defs>
<filter id="dropshadow" height="250%" width="200%">
<feGaussianBlur in="SourceAlpha" stdDeviation="2"/>
<feOffset dx="1" dy="2" result="offsetblur"/>
<feMerge>
<feMergeNode/>
<feMergeNode in="SourceGraphic"/>
</feMerge>
</filter>
</defs>
<rect id="rect1" filter="url(#dropshadow)" x="22" y="17" width="251" height="153" fill="dodgerblue" stroke="dodgerblue" >
<animateTransform id="an1" attributeName="transform" type="rotate" begin="img1.mouseover" dur="0.2s" values="0 147.5 93.5;8 147.5 93.5" repeatCount="1" fill="freeze" />
<animateTransform attributeName="transform" type="rotate" begin="img1.mouseout" dur="0.4s" values="8 147.5 93.5;0 147.5 93.5" repeatCount="1" fill="freeze" />
</rect>
<rect id="rect2" filter="url(#dropshadow)" x="20" y="17" width="255" height="153" fill="skyblue" >
<animateTransform id="an2" attributeName="transform" type="rotate" begin="an1.end" dur="0.2s" values="0 147.5 93.5;-6 147.5 93.5" repeatCount="1" fill="freeze" />
<animateTransform attributeName="transform" type="rotate" begin="img1.mouseout" dur="0.4s" v values="-6 147.5 93.5;0 147.5 93.5" repeatCount="1" fill="freeze" />
</rect>
<rect filter="url(#dropshadow)" id="rect3" x="20" y="17" width="255" height="153" fill="skyblue" >
<animateTransform id="an3" attributeName="transform" type="rotate" begin="an2.end" dur="0.2s" values="0 147.5 93.5;4 147.5 93.5" repeatCount="1" fill="freeze" />
<animateTransform attributeName="transform" type="rotate" begin="img1.mouseout" dur="0.4s" v values="4 147.5 93.5;0 147.5 93.5" repeatCount="1" fill="freeze" />
</rect>
<image id="img1" filter="url(#dropshadow)" xlink:href="https://i.sstatic.net/vylHA.png" x="20" y="15" width="85%" height="85%" />
</svg>
</div>