Loneci 3

Variante.

SURVOL

<div style="width: 1000px; height: 563px; margin: 30px auto; text-align: left; background: url('http://ekladata.com/J2HhFOlGVKNNCjSbKo6-qXUU0Qk/img727.jpg'); border: 4px ridge white; box-shadow: 4px 4px 8px black;">
<p id="jar0">SURVOL</p>
<img id="jar1" class="jar" src="http://ekladata.com/RE-F9RsqbK5bQ5w28QqY38izytg.jpg" alt="" /> <img id="jar2" class="jar" src="http://ekladata.com/5gqnWTV5jlssDyUqN__wzoEWr08.jpg" alt="" /> <img id="jar3" class="jar" src="http://ekladata.com/HzcUO7A1XOv5VnNxqQyNOLrupxg.jpg" alt="" /> <img id="jar4" class="jar" src="http://ekladata.com/Qr0c5Uvws7uYbA8h0Jxik3kp7Ec.jpg" alt="" /> <img id="jar5" class="jar" src="http://ekladata.com/1lMVoR6YTRtZoX0njLGuEwSJkrQ.jpg" alt="" /> <img id="jar6" class="jar" src="http://ekladata.com/7A8-P1rxd5KiIHb2yGJlI4SZXfE.jpg" alt="" /> <img id="jar7" class="jar" src="http://ekladata.com/ehmfMg7KD1-QZ7tRx33cpp4CT2E.jpg" alt="" /> <img id="jar8" class="jar" src="http://ekladata.com/PE2OMG-Xgqb1442l1-p2PZytvH0.jpg" alt="" /></div>

<style><!--
#jar0{position:absolute; z-index:1; width:330px; font-size:30px; color:lime; text-shadow:1px 1px black; text-align:center; transform:translate(0px,60px) rotate(-55deg);}
.jar{position:absolute; z-index:1; width:1000px; height:563px; filter:grayscale(1); transition:all 1s 0s,filter 1s 1.2s;}
#jar1{clip-path:polygon(0% 0%,20% 0%, 0% 50%, 0% 50%);}
#jar2{clip-path:polygon(80% 0%,100% 0%, 100% 50%, 100% 50%);}
#jar3{clip-path:polygon(100% 50%,100% 50%, 100% 100%, 80% 100%);}
#jar4{clip-path:polygon(0% 50%,20% 100%, 20% 100%, 0% 100%);}
#jar5{clip-path:circle(15% at 50% 25%);}
#jar6{clip-path:circle(15% at 80% 50%);}
#jar7{clip-path:circle(15% at 50% 75%);}
#jar8{clip-path:circle(15% at 20% 50%);}
#jar1:hover,#jar2:hover,#jar3:hover,#jar4:hover{z-index:5; clip-path:polygon(0% 0%,100% 0%, 100% 100%, 0% 100%);filter:grayscale(0);}
#jar5:hover,#jar6:hover,#jar7:hover,#jar8:hover{z-index:5; clip-path:circle(100% at 50% 50%); filter:grayscale(0); }
--></style>