• Exemple 40

     

     

    <div style="width: 60vw; height: 33.75vw; border: 0.4vh ridge white; text-align: left; margin: 1vh auto;">
    <p id="fd0">&nbsp;</p>
    <input id="car1" class="car" src="http://ekladata.com/WZIh_sQ5eY2F_Bs_1xt9bYWelGI@190x190.jpg" type="image" /> <img id="grd1" class="grd" src="http://ekladata.com/WZIh_sQ5eY2F_Bs_1xt9bYWelGI.jpg" alt="" />
    <input id="car2" class="car" src="http://ekladata.com/r9DoNveumhkk2YPsnT1DpgA9i-w@190x190.jpg" type="image" /> <img id="grd2" class="grd" src="http://ekladata.com/r9DoNveumhkk2YPsnT1DpgA9i-w.jpg" alt="" />
    <input id="car3" class="car" src="http://ekladata.com/_axJIC8WopafBq_AN2kHihNZUrc@190x190.jpg" type="image" /> <img id="grd3" class="grd" src="http://ekladata.com/_axJIC8WopafBq_AN2kHihNZUrc.jpg" alt="" />
    <input id="car4" class="car" src="http://ekladata.com/v4BTtvuCEaUDER15yhJRH0ZOGLY@190x190.jpg" type="image" /> <img id="grd4" class="grd" src="http://ekladata.com/v4BTtvuCEaUDER15yhJRH0ZOGLY.jpg" alt="" />
    <input id="car5" class="car" src="http://ekladata.com/bIQgvijEvupWNlHdjZmuQ1e7xfA@190x190.jpg" type="image" /> <img id="grd5" class="grd" src="http://ekladata.com/bIQgvijEvupWNlHdjZmuQ1e7xfA.jpg" alt="" />
    <input id="car6" class="car" src="http://ekladata.com/clgzBjQQ4biKx31WLvKFZCecTGA@190x190.jpg" type="image" /> <img id="grd6" class="grd" src="http://ekladata.com/clgzBjQQ4biKx31WLvKFZCecTGA.jpg" alt="" />
    <input id="car7" class="car" src="http://ekladata.com/oWbEQ8yDQhxG4MjhabXHh0eT-GU@190x190.jpg" type="image" /> <img id="grd7" class="grd" src="http://ekladata.com/oWbEQ8yDQhxG4MjhabXHh0eT-GU.jpg" alt="" />
    </div>
    <style><!--
    #fd0{position:absolute; z-index:1; width:60vw; height:33.75vw; background:url('http://ekladata.com/7l3HN_cGilRZVGovLA9NsyxkBcs@1536x864.jpg'); background-size:cover; opacity:0.5;}
    .car{position:absolute; z-index:2; width:10vw; height:10vw; clip-path: polygon(0% 0%, 0% 100%, 25% 100%, 25% 25%, 75% 25%, 75% 75%, 25% 75%, 25% 100%, 100% 100%, 100% 0%); }
    #car1{transform:translate(8vw,1vw);}
    #car2{transform:translate(5vw,12vw);}
    #car3{transform:translate(2vw,23vw);}
    #car4{transform:translate(25vw,1vw);}
    #car5{transform:translate(42vw,1vw);}
    #car6{transform:translate(45vw,12vw);}
    #car7{transform:translate(48vw,23vw);}
    .grd{position:absolute; z-index:100; width:0vw; height:0vw; top:25vw; left:50vw; opacity:0; transition:all 1s linear;}
    #car1:focus ~ #grd1,#car2:focus ~ #grd2,#car3:focus ~ #grd3,#car4:focus ~ #grd4,#car5:focus ~ #grd5,#car6:focus ~ #grd6,#car7:focus ~ #grd7{width:100vw; height:56.25vw; top:10vw; left:0vw; opacity:1;}
    --></style>