Art.04C.7.21

 

 

 

 

 

*************************
<div style="width:1000px; height:562px; margin:20px auto; text-align:left; border:4px ridge white;">
<p id="col1" class="col">&nbsp;</p>
<p id="col2" class="col">&nbsp;</p>
<p id="col3" class="col">&nbsp;</p>
<p id="col4" class="col">&nbsp;</p>
<p id="col5" class="col">&nbsp;</p>
<img id="col6" src="http://ekladata.com/oldJsANhEvwOIfsekVRs_2phmPw@1000x562.jpg">
</div>
<style><!--
.col{position:absolute; z-index:5; width:30px; height:30px; border-radius:50%; box-shadow:inset -3px -3px 5px black; background:white;}
#col1{transform:translate(950px,50px);}
#col2{transform:translate(950px,120px);}
#col3{transform:translate(950px,190px);}
#col4{transform:translate(950px,260px);}
#col5{transform:translate(950px,330px);}
#col6{position:absolute; z-index:1; width:1000px; height:562px; transition:all 0.5s;}
#col1:hover ~ #col6{filter:hue-rotate(60deg);}
#col2:hover ~ #col6{filter:hue-rotate(120deg);}
#col3:hover ~ #col6{filter:hue-rotate(180deg);}
#col4:hover ~ #col6{filter:hue-rotate(240deg);}
#col5:hover ~ #col6{filter:hue-rotate(300deg);}
--></style>