Flex1

Par sécurité car je n'utilise pas souvent de genre de montage et que j'en oublie les façons de faire, voici une copie d'un page Ekla. 

On peut placer des images verticales et horizontales mélangées dans ce type de code, en le modifiant légèrement.


 

 

 

 

 



<div id="fx1">
<p id="ca">&nbsp;</p>
<p id="cb">&nbsp;</p>
<p id="cc">&nbsp;</p>
<p id="cd">&nbsp;</p>
<p id="ce">&nbsp;</p>
</div>

<style><!--
#fx1{display:flex; width:60vw; height:69vh; margin:2vh auto;}
#ca {height:69vh; background:url('http://ekladata.com/v2q68OSMr4gRLzYwm5oIzMARC1A.jpg'); background-size:61vw 69vh; flex:1; transition:all 1s ease-in;}
#cb {height:69vh; background:url('http://ekladata.com/fUdKqoJihfRs0sOpG6iK17435Sw.jpg'); background-size:61vw 69vh; flex:1; transition:all 1s ease-in;}
#cc {height:69vh; background:url('http://ekladata.com/dzx0Sz7v03I7gQOE-i-bOFCW9EE.jpg'); background-size:61vw 69vh; flex:1; transition:all 1s ease-in;}
#cd {height:69vh; background:url('http://ekladata.com/OJV61VsT-h3idM2hOSX01JQKAlE.jpg'); background-size:61vw 69vh; flex:1; transition:all 1s ease-in;}
#ce {height:69vh; background:url('http://ekladata.com/QHZ1Jt5-V0hUM1YlTiftQSQ6EYc.jpg'); background-size:61vw 69vh; flex:1; transition:all 1s ease-in;}
#ca:hover,#cb:hover,#cc:hover,#cd:hover,#ce:hover{flex:200;}
--></style>

Commentaires