Art2.31.10.22

Un petit rappel pour la façon de faire entrer des images (exemple avec ratio 16/9, de 800px par 450px) dans un montage au survol d'un bouton.

Deux exemples: soit entrée en glissant, soit en s'agrandissant.

 

 

<div style="position: relative; width: 800px; height: 450px; margin: 25px auto; text-align: left; border: 4px ridge white; background: url('http://ekladata.com/Dd6rHEnTQHoO1gqD6tPkrCeeb0s.jpg'); background-size: cover; overflow: hidden;">
<p id="bt1" class="bt">&nbsp;</p>
<p id="bt2" class="bt">&nbsp;</p>
<img id="fl1" class="fl" src="http://ekladata.com/R3M-owY7hJN6gh6gD5RCb5dammI.jpg" alt="" /> <img id="fl2" class="fl" src="http://ekladata.com/Wkc8Rr98LKXtZl6L9EPO1y6bqHE.jpg" alt="" /></div>

<style><!--
.bt{position:absolute; z-index:5; width:30px; height:30px; border:1px solid black; border-radius:100%; background:white; box-shadow:inset 2px 2px 4px black;}
#bt1{transform:translate(20px,50px);}
#bt2{transform:translate(20px,100px);}
.fl{position:absolute; z-index:1; transition:all 1s;}
#fl1{width:0px; height:450px; transform:translate(0px,0px);}
#fl2{width:800px; height:450px;transform:translate(-800px,0px);}
#bt1:hover ~ #fl1{width:800px;}
#bt2:hover ~ #fl2{transform:translate(0px,0px);}
--></style>

Pour cacher ce qui déborde du cadre, il faut que le montage soit positionné (relative ou absolute) et le paramétrer en overlow:hidden; (cacher ce qui dépasse).

La première image est en largeur: 0px et la seconde en 800px est positionnée hors du cadre.

L'animation peut se faire sur les 4 côtés (ou à votre gré des angles...).

 

 

&nbsp:

<div style="position:relative; width:800px; height:450px; margin:25px auto; text-align:left; border:4px ridge white; background:url('http://ekladata.com/Dd6rHEnTQHoO1gqD6tPkrCeeb0s.jpg'); background-size:cover;overflow:hidden;">
<p id="bta1" class="bta">&nbsp;</p>
<p id="bta2" class="bta">&nbsp;</p>
<img id="fla1" class="fla" src="http://ekladata.com/OsquBoTYysxQbgIMKFNS0wwE5Sg.jpg">
<img id="fla2" class="fla" src="http://ekladata.com/Z_dtiAwU6nUN27MypWREUwFcWes.jpg">
</div>
<style><!--
.bta{position:absolute; z-index:5; width:30px; height:30px; border:1px solid black; border-radius:100%; background:white; box-shadow:inset 2px 2px 4px black;}
#bta1{transform:translate(20px,50px);}
#bta2{transform:translate(20px,100px);}
.fla{position:absolute; z-index:1; transition:all 1s;}
#fla1{width:800px; height:0px; transform:translate(0px,0px);}
#fla2{width:800px; height:450px;transform:translate(0px,-450px);}
#bta1:hover ~ #fla1{height:450px;}
#bta2:hover ~ #fla2{transform:translate(0px,0px);}
--></style>

 

 

<div style="position:relative; width:800px; height:450px; margin:25px auto; text-align:left; border:4px ridge white; background:url('http://ekladata.com/Dd6rHEnTQHoO1gqD6tPkrCeeb0s.jpg'); background-size:cover;overflow:hidden;">
<p id="btb1" class="btb">&nbsp;</p>
<p id="btb2" class="btb">&nbsp;</p>
<img id="flb1" class="flb" src="http://ekladata.com/g3ov-U_VN8im9OoJUU8nKbo8b5g.jpg">
<img id="flb2" class="flb" src="http://ekladata.com/9cfOkS_y3a_S-dn8gLk1aW6K23s.jpg">
</div>
<style><!--
.btb{position:absolute; z-index:5; width:30px; height:30px; border:1px solid black; border-radius:100%; background:white; box-shadow:inset 2px 2px 4px black;}
#btb1{transform:translate(20px,50px);}
#btb2{transform:translate(20px,100px);}
.flb{position:absolute; z-index:1; transition:all 1s;}
#flb1{width:0px; height:450px; transform:translate(800px,0px);}
#flb2{width:800px; height:450px;transform:translate(800px,0px);}
#btb1:hover ~ #flb1{width:800px;transform:translate(0px,0px);}
#btb2:hover ~ #flb2{transform:translate(0px,0px);}
--></style>

 

 

<div style="position: relative; width: 800px; height: 450px; margin: 25px auto; text-align: left; border: 4px ridge white; background: url('http://ekladata.com/Dd6rHEnTQHoO1gqD6tPkrCeeb0s.jpg'); background-size: cover; overflow: hidden;">
<p id="btc1" class="btc">&nbsp;</p>
<p id="btc2" class="btc">&nbsp;</p>
<img id="flc1" class="flc" src="http://ekladata.com/bkKHqA3IZSrYjOGL17ehvJBXWng.jpg" alt="" /> <img id="flc2" class="flc" src="http://ekladata.com/buzLeLIho5X-cqJ6zU_VuAcBfgA.jpg" alt="" /></div>

<style><!--
.btc{position:absolute; z-index:5; width:30px; height:30px; border:1px solid black; border-radius:100%; background:white; box-shadow:inset 2px 2px 4px black;}
#btc1{transform:translate(20px,50px);}
#btc2{transform:translate(20px,100px);}
.flc{position:absolute; z-index:1; transition:all 1s;}
#flc1{width:800px; height:0px; transform:translate(0px,450px);}
#flc2{width:800px; height:450px;transform:translate(0px,450px);}
#btc1:hover ~ #flc1{height:450px;transform:translate(0px,0px);}
#btc2:hover ~ #flc2{transform:translate(0px,0px);}
--></style>