Album photos B

Inversons l'animation qui passe de rond à rectangulaire.

Votre article étant à la place de ces lignes, vous ajustez l'espace entre ces lignes le montage pour que l'agrandissement se fasse au dessus du texte par:

 margin: 17vw auto 1vw auto;  17vw représente la valeur de l'espace entre la dernière ligne du texte et le haut du montage, à déterminer pour que l'image agrandie s'affiche bien dans votre article.

<div style="width: 60vw; height: 13.5vw; margin: 17vw auto 1vw auto; text-align: left;">
<p style="width: 60vw; height: 13.5vw;"><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><!--
.bvad{position:absolute; z-index:1; width:6vw; height:6vw; border:0.4vh solid white; border-radius:50%; filter:grayscale(1); -webkit-filter:grayscale(1); transition:all 1s linear;}
#bvad1{transform:translate(5vw,0vw) rotatex(180deg); box-sizing:border-box;}
#bvad2{transform:translate(15vw,0vw) rotatex(180deg);box-sizing:border-box; }
#bvad3{transform:translate(25vw,0vw) rotatex(180deg); box-sizing:border-box;}
#bvad4{transform:translate(35vw,0vw) rotatex(180deg); box-sizing:border-box;}
#bvad5{transform:translate(45vw,0vw) rotatex(180deg); box-sizing:border-box;}
#bvad6{transform:translate(5vw,6vw) rotatex(180deg); box-sizing:border-box;}
#bvad7{transform:translate(15vw,6vw) rotatex(180deg); box-sizing:border-box;}
#bvad8{transform:translate(25vw,6vw) rotatex(180deg); box-sizing:border-box; }
#bvad9{transform:translate(35vw,6vw) rotatex(180deg); box-sizing:border-box; }
#bvad10{transform:translate(45vw,6vw) 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:0%; filter:grayscale(0); -webkit-filter:grayscale(0);transform:translate(0vw,-20vw) rotatex(0deg);}
--></style>