-
Sélection fond 5
Nous avons le choix de la présentation des vignettes: les voici en rond.
Vos adresses image à la place des miennes en rouge, dans le code.
1
2
3
4
<div style="width: 80vw; height: 92vh; margin: 2vh auto; border: 0.2vw solid white; background: url('http://ekladata.com/ku9fdnQ9uC6dKQtw1ylpB-bcOl4.jpg'); background-size: 100% 100%;">
<p id="bout1" class="bout">1</p>
<p id="bout2" class="bout">2</p>
<p id="bout3" class="bout">3</p>
<p id="bout4" class="bout">4</p>
<p id="xw1" class="xw"> </p>
<p id="xw2" class="xw"> </p>
<p id="xw3" class="xw"> </p>
<p id="xw4" class="xw"> </p>
<p id="xx1" class="xx"> </p>
<p id="xx2" class="xx"> </p>
<p id="xx3" class="xx"> </p>
<p id="xx4" class="xx"> </p>
<p id="xy1" class="xy"> </p>
<p id="xy2" class="xy"> </p>
<p id="xy3" class="xy"> </p>
<p id="xy4" class="xy"> </p>
<p id="xz1" class="xz"> </p>
<p id="xz2" class="xz"> </p>
<p id="xz3" class="xz"> </p>
<p id="xz4" class="xz"> </p>
</div>
<hr>
<p style="text-align: center;"><strong>...</strong></p>
<style><!--
.bout{position:absolute; z-index:10; width:2vw; height:3vw; text-align:center; line-height:3vw; border:0.1vw solid white; box-shadow:inset -0.2vw -0.2vw 0.2vw black, inset 0.2vw 0.2vw 0.3vw white; background:linear-gradient(to top, red 0%, yellow 100%); font-size:2vw; color:white; text-shadow:0.1vw 0.1vw black;}
#bout1{transform:translate(77vw,4vh);}
#bout2{transform:translate(77vw,14vh);}
#bout3{transform:translate(77vw,24vh);}
#bout4{transform:translate(77vw,34vh);}
.xw{position:absolute; z-index:1; background:url('http://ekladata.com/i-Ek2O2d7KU0BGg_8JXHsOdGW4U.jpg'); background-size:80vw 92vh;}
#xw1{width:8vw; height:8vw; border:0.2vw solid white; box-shadow:-0.2vw -0.2vw 0.3vw black, inset 0.3vw 0.3vw 0.4vw black, inset -0.2vw -0.2vw 0.3vw white; border-radius:50%; transform:translate(10vw,5vh) rotatey(180deg); background-position:0vw 0vh; transition:all 1s linear 0s;}
#xw2{width:8vw; height:8vw; border:0.2vw solid white; box-shadow:-0.2vw -0.2vw 0.3vw black, inset 0.3vw 0.3vw 0.4vw black, inset -0.2vw -0.2vw 0.3vw white; border-radius:50%; transform:translate(25vw,25vh) rotatey(180deg); background-position:-20vw 0vh; transition:all 1s linear 0.1s;}
#xw3{width:8vw; height:8vw; border:0.2vw solid white; box-shadow:-0.2vw -0.2vw 0.3vw black, inset 0.3vw 0.3vw 0.4vw black, inset -0.2vw -0.2vw 0.3vw white; border-radius:50%; transform:translate(40vw,45vh) rotatey(180deg); background-position:-40vw 0vh; transition:all 1s linear 0.2s;}
#xw4{width:8vw; height:8vw; border:0.2vw solid white; box-shadow:-0.2vw -0.2vw 0.3vw black, inset 0.3vw 0.3vw 0.4vw black, inset -0.2vw -0.2vw 0.3vw white; border-radius:50%; transform:translate(55vw,65vh) rotatey(180deg); background-position:-60vw 0vh; transition:all 1s linear 0.3s;}
.xx{position:absolute; z-index:1; background:url('http://ekladata.com/DR5YGqqqS7m4wLTbKaXiErs-aqQ.jpg'); background-size:80vw 92vh;}
#xx1{width:8vw; height:8vw; border:0.2vw solid white; box-shadow:-0.2vw -0.2vw 0.3vw black, inset 0.3vw 0.3vw 0.4vw black, inset -0.2vw -0.2vw 0.3vw white; border-radius:50%; transform:translate(10vw,25vh) rotatey(180deg); background-position:0vw 0vh; transition:all 1s linear 0s;}
#xx2{width:8vw; height:8vw; border:0.2vw solid white; box-shadow:-0.2vw -0.2vw 0.3vw black, inset 0.3vw 0.3vw 0.4vw black, inset -0.2vw -0.2vw 0.3vw white; border-radius:50%; transform:translate(25vw,45vh) rotatey(180deg); background-position:-20vw 0vh; transition:all 1s linear 0.1s;}
#xx3{width:8vw; height:8vw; border:0.2vw solid white; box-shadow:-0.2vw -0.2vw 0.3vw black, inset 0.3vw 0.3vw 0.4vw black, inset -0.2vw -0.2vw 0.3vw white; border-radius:50%; transform:translate(40vw,65vh) rotatey(180deg); background-position:-40vw 0vh; transition:all 1s linear 0.2s;}
#xx4{width:8vw; height:8vw; border:0.2vw solid white; box-shadow:-0.2vw -0.2vw 0.3vw black, inset 0.3vw 0.3vw 0.4vw black, inset -0.2vw -0.2vw 0.3vw white; border-radius:50%; transform:translate(55vw,5vh) rotatey(180deg); background-position:-60vw 0vh; transition:all 1s linear 0.3s;}
.xy{position:absolute; z-index:1; background:url('http://ekladata.com/jFJPx9X8VtMVCBOit6VC-iFEJvI.jpg'); background-size:80vw 92vh;}
#xy1{width:8vw; height:8vw; border:0.2vw solid white; box-shadow:-0.2vw -0.2vw 0.3vw black, inset 0.3vw 0.3vw 0.4vw black, inset -0.2vw -0.2vw 0.3vw white; border-radius:50%; transform:translate(10vw,45vh) rotatey(180deg); background-position:0vw 0vh; transition:all 1s linear 0s;}
#xy2{width:8vw; height:8vw; border:0.2vw solid white; box-shadow:-0.2vw -0.2vw 0.3vw black, inset 0.3vw 0.3vw 0.4vw black, inset -0.2vw -0.2vw 0.3vw white; border-radius:50%; transform:translate(25vw,65vh) rotatey(180deg); background-position:-20vw 0vh; transition:all 1s linear 0.1s;}
#xy3{width:8vw; height:8vw; border:0.2vw solid white; box-shadow:-0.2vw -0.2vw 0.3vw black, inset 0.3vw 0.3vw 0.4vw black, inset -0.2vw -0.2vw 0.3vw white; border-radius:50%; transform:translate(40vw,5vh) rotatey(180deg); background-position:-40vw 0vh; transition:all 1s linear 0.2s;}
#xy4{width:8vw; height:8vw; border:0.2vw solid white; box-shadow:-0.2vw -0.2vw 0.3vw black, inset 0.3vw 0.3vw 0.4vw black, inset -0.2vw -0.2vw 0.3vw white; border-radius:50%; transform:translate(55vw,25vh) rotatey(180deg); background-position:-60vw 0vh; transition:all 1s linear 0.3s;}
.xz{position:absolute; z-index:1; background:url('http://ekladata.com/wNBxSjwuSf751KHXOZdW7mXFYU8.jpg'); background-size:80vw 92vh;}
#xz1{width:8vw; height:8vw; border:0.2vw solid white; box-shadow:-0.2vw -0.2vw 0.3vw black, inset 0.3vw 0.3vw 0.4vw black, inset -0.2vw -0.2vw 0.3vw white; border-radius:50%; transform:translate(10vw,65vh) rotatey(180deg); background-position:0vw 0vh; transition:all 1s linear 0s;}
#xz2{width:8vw; height:8vw; border:0.2vw solid white; box-shadow:-0.2vw -0.2vw 0.3vw black, inset 0.3vw 0.3vw 0.4vw black, inset -0.2vw -0.2vw 0.3vw white; border-radius:50%; transform:translate(25vw,5vh) rotatey(180deg); background-position:-20vw 0vh; transition:all 1s linear 0.1s;}
#xz3{width:8vw; height:8vw; border:0.2vw solid white; box-shadow:-0.2vw -0.2vw 0.3vw black, inset 0.3vw 0.3vw 0.4vw black, inset -0.2vw -0.2vw 0.3vw white; border-radius:50%; transform:translate(40vw,25vh) rotatey(180deg); background-position:-40vw 0vh; transition:all 1s linear 0.2s;}
#xz4{width:8vw; height:8vw; border:0.2vw solid white; box-shadow:-0.2vw -0.2vw 0.3vw black, inset 0.3vw 0.3vw 0.4vw black, inset -0.2vw -0.2vw 0.3vw white; border-radius:50%; transform:translate(55vw,45vh) rotatey(180deg); background-position:-60vw 0vh; transition:all 1s linear 0.3s;}
.bout:hover{background:linear-gradient(to top, green 0%, yellow 100%);}
#bout1:hover ~ #xw1, #bout2:hover ~ #xx1, #bout3:hover ~ #xy1, #bout4:hover ~ #xz1{z-index:5; width:20vw; height:92vh; transform:translate(0vw,0vh) rotatey(0deg); border-radius:0%; border:none; box-shadow:none;}
#bout1:hover ~ #xw2, #bout2:hover ~ #xx2, #bout3:hover ~ #xy2, #bout4:hover ~ #xz2{z-index:5; width:20vw; height:92vh; transform:translate(20vw,0vh) rotatey(0deg); border-radius:0%; border:none; box-shadow:none;}
#bout1:hover ~ #xw3, #bout2:hover ~ #xx3, #bout3:hover ~ #xy3, #bout4:hover ~ #xz3{z-index:5; width:20vw; height:92vh; transform:translate(40vw,0vh) rotatey(0deg);border-radius:0%; border:none; box-shadow:none;}
#bout1:hover ~ #xw4, #bout2:hover ~ #xx4, #bout3:hover ~ #xy4, #bout4:hover ~ #xz4{z-index:5; width:20vw; height:92vh; transform:translate(60vw,0vh) rotatey(0deg); border-radius:0%; border:none; box-shadow:none;}
--></style>
montages par codes HTML/CSS
Créer mon blog