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 : 120741 Mur image avec lien | | Coucou Voici comment réaliser un mur d'image avec lien de page HTML - Code:
-
<!-----Ajuster la valeur de width (ci-dessous à 60%) pour obtenir 2 ou 3 colonnes-----> <div class="container-a4" style="width: 60%;min-height:700px;margin: 0 auto;"> <ul class="caption-style-4"> <li> <img src="URL DE VOTRE IMAGE" alt=""> <div class="caption"> <div class="blur"></div> <div class="caption-text"> <h1>Parametric Lab</h1> <p><a href="URL LIEN">TITRE</a></p> </div> </div> </li> <li> <img src="URL DE VOTRE IMAGE" alt=""> <div class="caption"> <div class="blur"></div> <div class="caption-text"> <h1>Parametric Lab</h1> <p><a href="URL LIEN">TITRE</a></p> </div> </div> </li> <li> <img src="URL DE VOTRE IMAGE" alt=""> <div class="caption"> <div class="blur"></div> <div class="caption-text"> <h1>Parametric Lab</h1> <p><a href="URL LIEN">TITRE</a></p> </div> </div> </li> <li> <img src="URL DE VOTRE IMAGE" alt=""> <div class="caption"> <div class="blur"></div> <div class="caption-text"> <h1>Parametric Lab</h1> <p><a href=URL LIEN">TITRE</a></p> </div> </div> </li> <li> <img src="URL DE VOTRE IMAGE" alt=""> <div class="caption"> <div class="blur"></div> <div class="caption-text"> <h1>Parametric Lab</h1> <p><a href="URL LIEN">TITRE</a></p> </div> </div> </li> <li> <img src="URL DE VOTRE IMAGE" alt=""> <div class="caption"> <div class="blur"></div> <div class="caption-text"> <h1>Parametric Lab</h1> <p><a href="URL LIEN">TITRE</a></p> </div> </div> </li> </ul> </div></div> CSS - Code:
-
h1,h2,h3,h4{ padding: 0px; margin: 0px; } a {color:yellow;} a:hover {color:white;}
.caption-style-4{ list-style-type: none; margin: 0px; padding: 0px; } /*----------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; }
|
| |
Kira34
Bravo pour ton badge
Bravo pour ton badge, pour te remercier de ta participation au concours
Présence
Merci pour ta présence sur le forum.
MembreActif Messages : 326 Venue : 17/07/2020 Je suis : Age : 63 Je vie à : Languedoc Humeur : Bonne Mes Points : 28037 Re: Mur image avec lien | | coucou ma belle un grand merci. |
| |
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 : 120741 Re: Mur image avec lien | | Avec plaisir Kira34
Bisous |
| |