Album photos D

Variante du modèle Album photos B par la position des vignettes.

Le nombre et la taille des vignettes est à votre convenance.

<div style="width: 60vw; height: 8vw; margin: 17vw auto 1vw auto; text-align: left;">
<p id="com">Clic maintenu.</p>
<p style="width: 60vw; height: 8vw; display: inline-block;"><img id="bvad1" class="bvad" src="http://ekladata.com/lwI3v-a2cQDC_DwhzwXAJMfXtuQ.jpg" alt="" /><img id="bvad2" class="bvad" src="http://ekladata.com/4F-_ASuY0eAGZhbzPbunjEvm3yU.jpg" alt="" /><img id="bvad3" class="bvad" src="http://ekladata.com/5ZYCYkI3PRDRTm-x0-yrJzI_bj0.jpg" alt="" /><img id="bvad4" class="bvad" src="http://ekladata.com/YkFc1QsJmL9p_uNqDM_ER5Lw8KQ.jpg" alt="" /><img id="bvad5" class="bvad" src="http://ekladata.com/twAFJE63wiLJcF6lNla64KwsF6Y.jpg" alt="" /><img id="bvad6" class="bvad" src="http://ekladata.com/QS7B20dxPZn632vQ7o6wQrO_QAs.jpg" alt="" /><img id="bvad7" class="bvad" src="http://ekladata.com/3NYdKVf5n67NzlcOUI35BKRgCwc.jpg" alt="" /><img id="bvad8" class="bvad" src="http://ekladata.com/1hJMtwksF8t3z2Fh3AaN7g9zKdc.jpg" alt="" /><img id="bvad9" class="bvad" src="http://ekladata.com/TU2eQbyuasr4IuZxYMEo76GafMY.jpg" alt="" /><img id="bvad10" class="bvad" src="http://ekladata.com/BwzvyPgXq5g9QJ0y9te_RCfrVZA.jpg" alt="" /></p>
</div>

<style><!--
#com{position:absolute; z-index:1; width:60vw; text-align:center; font-size:1.2vw;}
.bvad{position:absolute; z-index:1; width:5.2vw; height:5.2vw; margin:2vw 0 0 0; transform:rotatex(180deg); box-sizing:border-box;border:0.4vh solid white; border-radius:50%; filter:grayscale(1); -webkit-filter:grayscale(1); transition:all 1s linear;}
#bvad1{transform:translate(0vw,0vw) rotatex(180deg); box-sizing:border-box;}
#bvad2{transform:translate(5.5vw,0vw) rotatex(180deg);box-sizing:border-box; }
#bvad3{transform:translate(11vw,0vw) rotatex(180deg); box-sizing:border-box;}
#bvad4{transform:translate(16.5vw,0vw) rotatex(180deg); box-sizing:border-box;}
#bvad5{transform:translate(22vw,0vw) rotatex(180deg); box-sizing:border-box;}
#bvad6{transform:translate(27.5vw,0vw) rotatex(180deg); box-sizing:border-box;}
#bvad7{transform:translate(33vw,0vw) rotatex(180deg); box-sizing:border-box;}
#bvad8{transform:translate(38.5vw,0vw) rotatex(180deg); box-sizing:border-box; }
#bvad9{transform:translate(44vw,0vw) rotatex(180deg); box-sizing:border-box; }
#bvad10{transform:translate(49.5vw,0vw) rotatex(180deg); box-sizing:border-box; }
#bvad1:active,#bvad2:active,#bvad3:active,#bvad4:active,#bvad5:active,#bvad6:active,#bvad7:active,#bvad8:active,#bvad9:active,#bvad10:active{z-index:5; width:60vw; height:33.75vw; border-radius:50%; filter:grayscale(0); -webkit-filter:grayscale(0);transform:translate(0vw,-20vw) rotatex(0deg);}
--></style>