Printemps2

Pour celles et ceux qui préfèrent les animations au survol, voici le même montage.

<div style="height: 675px; margin: 50px 0px 0px -25px; width: 1200px;">

<img class="cds" id="cds1" src="https://image.eklablog.com/7JDbhw4kxP87uxILtLMYKz_eoLQ=/filters:no_upscale()/http%3A%2F%2Fekladata.com%2FqCT0WCunG9OhQCQ9wBsQpwMPKZ4.jpg" />

<img class="cds" id="cds2" src="https://image.eklablog.com/Mofe006OctuTVRrLzeL8H5WMLm8=/filters:no_upscale()/http%3A%2F%2Fekladata.com%2FbLTvnOMTb-Wz0pzRiXHVOPJDYFw.jpg" />

<img class="cds" id="cds3" src="https://image.eklablog.com/r_8RNgeuDz1G0E3Sn36gAJvVfqU=/filters:no_upscale()/http%3A%2F%2Fekladata.com%2FWbWc7NIS6HyH-TZwIpiu4MRuODg.jpg" />

<img class="cds" id="cds4" src="https://image.eklablog.com/tZt3VPznhf33oXFmBz9XwjCrmDQ=/filters:no_upscale()/http%3A%2F%2Fekladata.com%2F0enUT-BSY4fKGqfgswuaFuE8Rbk.jpg" />

<img class="cds" id="cds5" src="https://image.eklablog.com/r_8RNgeuDz1G0E3Sn36gAJvVfqU=/filters:no_upscale()/http%3A%2F%2Fekladata.com%2FWbWc7NIS6HyH-TZwIpiu4MRuODg.jpg" />

<img class="cds" id="cds6" src="https://image.eklablog.com/4tjV4-mN1CiSO4QAYygh6sgbmxs=/filters:no_upscale()/http%3A%2F%2Fekladata.com%2FI9BDYGLsnEUigy5fCMfbN4SMYyg.jpg" />

</div>

<style><!--

.cds{position:absolute; z-index:1;  transition:all 1s;}

#cds1{box-sizing:border-box; width:1200px; height:675px; border:6px ridge white; transform:translate(0px,0px);}

#cds2{box-sizing:border-box;width:1000px; height:563px; border:6px ridge white; transform:translate(200px,56px);}

#cds3{box-sizing:border-box;width:800px; height:450px; border:6px ridge white; transform:translate(400px,112px);}

#cds4{box-sizing:border-box;width:600px; height:338px; border:6px ridge white; transform:translate(600px,168px);}

#cds5{box-sizing:border-box;width:400px; height:225px; border:6px ridge white; transform:translate(800px,224px);} 

#cds6{box-sizing:border-box;width:200px; height:113px; border:6px ridge white; transform:translate(1000px,280px);}

#cds1:hover,#cds2:hover,#cds3:hover,#cds4:hover,#cds5:hover,#cds6:hover{z-index:10; width:1200px; height:675px;transform:translate(0px,0px);}

--></style>

Aucun commentaire: