-
Clic et survol 11 images
J'ai un peu modifié de code afin qu'il réponde mieux à ce que j'ai compris de la demande.
Le clic se fait juste sur la zone texte et non plus sur l'ensemble du montage ce qui devrait permettre une varainte que je vais essayer:
La zone texte sera dans la zone article, avec le reste de l'article en dessous et en cliquant dessus, les vignettes viendront s'afficher au dessus de l'article.
Cliquez sur ces lignes pour déplacer les vignettes.
Puis survolez chaque vignette pour l'agrandir.
Retour par un clic hors montage.
<div style="width: 80%; height: 86vh; margin: 0px auto;"><input id="b1" type="text" />
<p id="m0">Cliquez sur ces lignes pour déplacer les vignettes.<br />Puis survolez chaque vignette pour l'agrandir.<br />Retour par un clic hors montage.</p>
<p id="m1"> </p>
<p id="m2"> </p>
<p id="m3"> </p>
<p id="m4"> </p>
<p id="m5"> </p>
<p id="m6"> </p>
<p id="m7"> </p>
<p id="m8"> </p>
<p id="m9"> </p>
<p id="m10"> </p>
<p id="m11"> </p>
</div>
<style><!--
#b1{position:absolute; z-index:10; width:80vw; height:86vh; background:transparent; border:none;}
#m0{position:absolute;z-index:1; width:45vw; height:15vh; text-align:center; font-size:3.5vh; text-shadow:1px 1px black; color:yellow; transform:translate(15vw,0vh);}
#m1{position:absolute; z-index:5; width:15vw; height:20vh; border-radius:3vw; border:0.2vw ridge white; box-shadow:0.2vw 0.2vw 0.3vw black, inset 0.3vw 0.3vh 0.4vw white, inset -0.2vw -0.2vh 0.4vw black; transform:translate(5vw,12vh) rotate(-15deg); background:url('http://ekladata.com/pUPrzy732n_CLeBQdVsAgsnoYIg.jpg'); background-size:cover; transition:all 1s linear;}
#m2{position:absolute; z-index:5; width:15vw; height:20vh; border-radius:3vw; border:0.2vw ridge white; box-shadow:0.2vw 0.2vw 0.3vw black, inset 0.3vw 0.3vh 0.4vw white, inset -0.2vw -0.2vh 0.4vw black; transform:translate(10vw,20vh); background:url('http://ekladata.com/wuJhq8rvDQqtQJYcb31OWj1HNJY.jpg'); background-size:cover; transition:all 1s linear;}
#m3{position:absolute; z-index:5; width:15vw; height:20vh; border-radius:3vw; border:0.2vw ridge white; box-shadow:0.2vw 0.2vw 0.3vw black, inset 0.3vw 0.3vh 0.4vw white, inset -0.2vw -0.2vh 0.4vw black; transform:translate(15vw,30vh)rotate(20deg); background:url('http://ekladata.com/OTSEz0y8Qo-5RcBshB3zcIw_e34.jpg'); background-size:cover; transition:all 1s linear;}
#m4{position:absolute; z-index:5; width:15vw; height:20vh; border-radius:3vw; border:0.2vw ridge white; box-shadow:0.2vw 0.2vw 0.3vw black, inset 0.3vw 0.3vh 0.4vw white, inset -0.2vw -0.2vh 0.4vw black; transform:translate(10vw,50vh) rotate(-10deg); background:url('http://ekladata.com/YSg7ghrcBEU5LW5tAlN4ckDRBAc.jpg'); background-size:cover; transition:all 1s linear;}
#m5{position:absolute; z-index:5; width:15vw; height:20vh; border-radius:3vw; border:0.2vw ridge white; box-shadow:0.2vw 0.2vw 0.3vw black, inset 0.3vw 0.3vh 0.4vw white, inset -0.2vw -0.2vh 0.4vw black; transform:translate(25vw,15vh) rotate(5deg) ; background:url('http://ekladata.com/sbLfCWQWPH2e3ltG-WZE0nuE3S4.jpg'); background-size:cover; transition:all 1s linear;}
#m6{position:absolute; z-index:5; width:15vw; height:20vh; border-radius:3vw; border:0.2vw ridge white; box-shadow:0.2vw 0.2vw 0.3vw black, inset 0.3vw 0.3vh 0.4vw white, inset -0.2vw -0.2vh 0.4vw black; transform:translate(30vw,35vh) rotate(10deg); background:url('http://ekladata.com/TzdKIIA86QCLIePvqBG4N3uM69s.jpg'); background-size:cover; transition:all 1s linear;}
#m7{position:absolute; z-index:5; width:15vw; height:20vh; border-radius:3vw; border:0.2vw ridge white; box-shadow:0.2vw 0.2vw 0.3vw black, inset 0.3vw 0.3vh 0.4vw white, inset -0.2vw -0.2vh 0.4vw black; transform:translate(35vw,50vh)rotate(-20deg) ; background:url('http://ekladata.com/dcxP7cnpWijzOLlLIGvMZm9qpt4.jpg'); background-size:cover; transition:all 1s linear;}
#m8{position:absolute; z-index:5; width:15vw; height:20vh; border-radius:3vw; border:0.2vw ridge white; box-shadow:0.2vw 0.2vw 0.3vw black, inset 0.3vw 0.3vh 0.4vw white, inset -0.2vw -0.2vh 0.4vw black; transform:translate(55vw,12vh) rotate(-10deg); background:url('http://ekladata.com/YSg7ghrcBEU5LW5tAlN4ckDRBAc.jpg'); background-size:cover; transition:all 1s linear;}
#m9{position:absolute; z-index:5; width:15vw; height:20vh; border-radius:3vw; border:0.2vw ridge white; box-shadow:0.2vw 0.2vw 0.3vw black, inset 0.3vw 0.3vh 0.4vw white, inset -0.2vw -0.2vh 0.4vw black; transform:translate(40vw,20vh) rotate(0deg) ; background:url('http://ekladata.com/sbLfCWQWPH2e3ltG-WZE0nuE3S4.jpg'); background-size:cover; transition:all 1s linear;}
#m10{position:absolute; z-index:5; width:15vw; height:20vh; border-radius:3vw; border:0.2vw ridge white; box-shadow:0.2vw 0.2vw 0.3vw black, inset 0.3vw 0.3vh 0.4vw white, inset -0.2vw -0.2vh 0.4vw black; transform:translate(50vw,35vh) rotate(10deg); background:url('http://ekladata.com/TzdKIIA86QCLIePvqBG4N3uM69s.jpg'); background-size:cover; transition:all 1s linear;}
#m11{position:absolute; z-index:5; width:15vw; height:20vh; border-radius:3vw; border:0.2vw ridge white; box-shadow:0.2vw 0.2vw 0.3vw black, inset 0.3vw 0.3vh 0.4vw white, inset -0.2vw -0.2vh 0.4vw black; transform:translate(55vw,50vh)rotate(-20deg) ; background:url('http://ekladata.com/dcxP7cnpWijzOLlLIGvMZm9qpt4.jpg'); background-size:cover; transition:all 1s linear;}
#b1:focus{width:0px;height:0px;}
#b1:focus ~ #m1{transform:translate(5vw,15vh); }
#b1:focus ~ #m2{transform:translate(22vw,15vh);}
#b1:focus ~ #m3{transform:translate(42vw,15vh);}
#b1:focus ~ #m4{transform:translate(60vw,15vh);}
#b1:focus ~ #m5{transform:translate(10vw,37vh);}
#b1:focus ~ #m6{transform:translate(30vw,37vh);}
#b1:focus ~ #m7{transform:translate(50vw,37vh);}
#b1:focus ~ #m8{transform:translate(5vw,60vh);}
#b1:focus ~ #m9{transform:translate(22vw,60vh);}
#b1:focus ~ #m10{transform:translate(42vw,60vh);}
#b1:focus ~ #m11{transform:translate(60vw,60vh);}
#m1:hover{z-index:10; width:80vw; height:86vh; border:none; box-shadow:0px 0px 0px; border-radius:0px; margin:-15vh 0 0 -5vw;}
#m2:hover{z-index:10; width:80vw; height:86vh; border:none; box-shadow:0px 0px 0px; border-radius:0px;margin:-15vh 0 0 -22vw;}
#m3:hover{z-index:10; width:80vw; height:86vh; border:none; box-shadow:0px 0px 0px; border-radius:0px; margin:-15vh 0 0 -42vw;}
#m4:hover{z-index:10; width:80vw; height:86vh; border:none; box-shadow:0px 0px 0px; border-radius:0px;margin:-15vh 0 0 -60vw;}
#m5:hover{z-index:10; width:80vw; height:86vh; border:none; box-shadow:0px 0px 0px; border-radius:0px;margin:-37vh 0 0 -10vw;}
#m6:hover{z-index:10; width:80vw; height:86vh; border:none; box-shadow:0px 0px 0px; border-radius:0px; margin:-37vh 0 0 -30vw;}
#m7:hover{z-index:10; width:80vw; height:86vh; border:none; box-shadow:0px 0px 0px; border-radius:0px;margin:-37vh 0 0 -50vw;}
#m8:hover{z-index:10; width:80vw; height:86vh; border:none; box-shadow:0px 0px 0px; border-radius:0px;margin:-60vh 0 0 -5vw;}
#m9:hover{z-index:10; width:80vw; height:86vh; border:none; box-shadow:0px 0px 0px; border-radius:0px;margin:-60vh 0 0 -22vw;}
#m10:hover{z-index:10; width:80vw; height:86vh; border:none; box-shadow:0px 0px 0px; border-radius:0px; margin:-60vh 0 0 -42vw;}
#m11:hover{z-index:10; width:80vw; height:86vh; border:none; box-shadow:0px 0px 0px; border-radius:0px;margin:-60vh 0 0 -60vw;}
--></style>
montages par codes HTML/CSS
Créer mon blog