Ptite_Perle
A les clefs du forum
Je tiens le trousseau de clefs du forum
Fondatrice Messages : 5859 Venue : 27/06/2009 Je suis : Age : 60 Je vie à : Lyon Humeur : Bonne humeur Mes Points : 120481 Joli menu | | Coucou Emmene tes visiteurs à l'intérieur de ton site ou tout autres supports avec ce joli menu Dans code ce son mes liens bien entendu change les par les tiennes; URL , lien d'images etc. TU peux aussi changer la dimension des images, la couleurs des liens A toi de jouer maintenant Voir le joli menu HTML - Code:
-
<div style="width: 60%;min-height:700px;margin: 0 auto;" class="container-a4"> <ul class="caption-style-4"> <li> <img alt="Forum crea illusion fantasy" src="https://i.servimg.com/u/f38/16/35/10/19/testim10.jpg" /> <div class="caption"> <div class="blur"> </div> <div class="caption-text"> <h1> Forum crea illusion fantasy </h1> <p> <a href="https://forumcrea.forumactif.org/">Accueil</a> </p> </div> </div> </li> <li> <img alt="" src="https://i.servimg.com/u/f38/16/35/10/19/213.jpg" /> <div class="caption"> <div class="blur"> </div> <div class="caption-text"> <h1> Forum crea illusion fantasy </h1> <p> <a href="https://forumcrea.forumactif.org/f8-presentation">Présentation</a> </p> </div> </div> </li> <li> <img alt="" src="https://i.servimg.com/u/f38/16/35/10/19/314.jpg" /> <div class="caption"> <div class="blur"> </div> <div class="caption-text"> <h1> Forum crea illusion fantasy </h1> <p> <a href="https://forumcrea.forumactif.org/f12-reglement">Réglement</a> </p> </div> </div> </li> <li> <img alt="" src="https://i.servimg.com/u/f38/16/35/10/19/213.jpg" /> <div class="caption"> <div class="blur"> </div> <div class="caption-text"> <h1> Forum crea illusion fantasy </h1> <p> <a href="https://i.servimg.com/u/f38/16/35/10/19/213.jpg">Nos jeux</a> </p> </div> </div> </li> <li> <img alt="" src="https://i.servimg.com/u/f38/16/35/10/19/testim10.jpg" /> <div class="caption"> <div class="blur"> </div> <div class="caption-text"> <h1> Forum crea illusion fantasy </h1> <p> <a href="https://i.servimg.com/u/f38/16/35/10/19/testim10.jpg">Exemple</a> </p> </div> </div> </li> <li> <img alt="" src="https://i.servimg.com/u/f38/16/35/10/19/testim10.jpg" /> <div class="caption"> <div class="blur"> </div> <div class="caption-text"> <h1> Forum crea illusion fantasy </h1> <p> <a href="https://forumcrea.forumactif.org/">Nous rejoindre</a> </p> </div> </div> </li> </ul> </div><br /> CSS Modifiable selon tes couleurs et envie - Code:
-
/*----------Image----------*/ .caption-style-4 img { margin: 0px; padding: px; float: left; z-index: 4; width: 300px;/*---largeur img-----*/ height: 225px;/*----hauteur img*/ }
.caption-style-4 li{ float: left; padding: 0px; position: relative; overflow: hidden; box-shadow: 6px 6px 10px black;/*--ombre portée---*/ }
.caption-style-4 li:hover .caption{ opacity: 1; }
.caption-style-4 li:hover img{ opacity: 1; transform: scale(1.15,1.15); -webkit-transform:scale(1.15,1.15); -moz-transform:scale(1.15,1.15); -ms-transform:scale(1.15,1.15); -o-transform:scale(1.15,1.15); }
.caption-style-4 img{ margin: 0px; padding: 0px; float: left; z-index: 4; }
.caption-style-4 .caption{ cursor: pointer; position: absolute; opacity: 0; -webkit-transition:all 0.45s ease-in-out; -moz-transition:all 0.45s ease-in-out; -o-transition:all 0.45s ease-in-out; -ms-transition:all 0.45s ease-in-out; transition:all 0.45s ease-in-out; }
.caption-style-4 img{ -webkit-transition:all 0.25s ease-in-out; -moz-transition:all 0.25s ease-in-out; -o-transition:all 0.25s ease-in-out; -ms-transition:all 0.25s ease-in-out; transition:all 0.25s ease-in-out; } .caption-style-4 .blur{ background-color: rgba(0,0,0,0.65); height: 300px; width: 400px; z-index: 5; position: absolute; }
.caption-style-4 .caption-text h1{ text-transform: uppercase; font-size: 24px; } .caption-style-4 .caption-text{ z-index: 10; color: #fff; position: absolute; width: 300px; height: 200px; text-align: center; top:60px; }
|
| |