Melo
J'ignore si les pages publiées sont annoncées aux abonnés mais vous trouverez les liens dans ma rubrique: PAGE
J'ai ajouté un texte et un cadre avec bordure, ombres extérieures et intérieures et elles restent visibles alors que dans mon montage, elles disparaissent à l'affichage ... ?
Par contre, ayant modifié le thème (haut/gauche), mes pages Ekla s'affichent correctement ce qui fait que j'ai supprimé les pages modifiées.
Le survol colore la vignette et le clic l'affiche en grand; retour par un clic sur l'image.
<div id="melo">
<p id="info">Le survol colore la vignette et le clic l'affiche en grand; retour par un clic sur l'image.</p>
<input id="mel1" class="mel" type="image" src="http://ekladata.com/yMf744jW5FTblpRZchaUHXD3HrU.jpg">
<img id="mel1a" src="http://ekladata.com/yMf744jW5FTblpRZchaUHXD3HrU.jpg">
<input id="mel2" class="mel" type="image" src="http://ekladata.com/odyW7HRMO6Lkye8IHSQgbrQFInk.jpg">
<img id="mel2a" src="http://ekladata.com/odyW7HRMO6Lkye8IHSQgbrQFInk.jpg">
<input id="mel3" class="mel" type="image" src="http://ekladata.com/FBxzwqwGQjLcqNP3fJUuWP84Ipo.jpg">
<img id="mel3a" src="http://ekladata.com/FBxzwqwGQjLcqNP3fJUuWP84Ipo.jpg">
<input id="mel4" class="mel" type="image" src="http://ekladata.com/BNqu9P7RyONlsBZC30r7z7m-bUk.jpg">
<img id="mel4a" src="http://ekladata.com/BNqu9P7RyONlsBZC30r7z7m-bUk.jpg">
<input id="mel5" class="mel" type="image" src="http://ekladata.com/7oGLN2UgPBm5YVwhuLHEtOESGu8.jpg">
<img id="mel5a" src="http://ekladata.com/7oGLN2UgPBm5YVwhuLHEtOESGu8.jpg">
<input id="mel6" class="mel" type="image" src="http://ekladata.com/PCMN_NcuZRIMBmVxdh0RbTu3pDs.jpg">
<img id="mel6a" src="http://ekladata.com/PCMN_NcuZRIMBmVxdh0RbTu3pDs.jpg">
</div>
<style><!--
#info{position:absolute; width:1200px; text-align:center; font-size:25px; color:white; text-sahdow:1px 1px black; transform:translate(0px,0px);}
#melo{position:relative; width:1200px; height:675px; border:4px solid white; box-shadow:4px 4px 9px black; margin:50px auto; background: linear-gradient(to top, #c9de96 0%,#8ab66b 44%,#398235 100%);}
.mel{position:absolute; width:320px; border:2px solid white; box-shadow:inset -4px -4px 8px black, inset 4px 4px 8px white, 4px 4px 8px black; border-radius:30px; filter:grayscale(1);}
#mel1{height:180px; transform:translate(60px,105px);}
#mel2{height:180px; transform:translate(440px,105px);}
#mel3{height:180px; transform:translate(820px,105px);}
#mel4{height:180px; transform:translate(60px,385px);}
#mel5{height:180px; transform:translate(440px,385px);}
#mel6{height:180px; transform:translate(820px,385px);}
#mel1:hover,#mel2:hover,#mel3:hover,#mel4:hover,#mel5:hover,#mel6:hover{filter:grayscale(0);}
#mel1a,#mel2a,#mel3a,#mel4a,#mel5a,#mel6a{position:absolute; z-index:5; width:120px; height:68px; border-radius:50%; transform:translate(520px,300px) rotatey(270deg); transition:all 2s;}
#mel1:focus ~ #mel1a,#mel2:focus ~ #mel2a,#mel3:focus ~ #mel3a,#mel4:focus ~ #mel4a,#mel5:focus ~ #mel5a,#mel6:focus ~ #mel6a{z-index:5; width:1200px; height:675px; border-radius:0%; transform:translate(0px,0px) rotatey(0deg);}
--></style>
Commentaires
Enregistrer un commentaire