manonhtml
Messages postés5Date d'inscriptionmercredi 2 mars 2016StatutMembreDernière intervention 3 mars 2016
-
2 mars 2016 à 13:13
anthony -
3 mars 2016 à 11:04
Bonjour à tous,
Dans le cadre d'un cours nous devons créer un site internet mais nous sommes bloquées... c'est pourquoi nous comptons sur vous! Comment mettre des images en vignette pour faire une galerie photo ? (voir image ci-dessus) Et comment faire un cadre transparent sous le texte ? (voir image également)
Merci d'avance, vous nous serez d'une grande aide !!
<h1> Bienvenue à tous sur le site des Gourmets angevins!</h1>
<p>Deux passionnées de la gastronomie vous présentent ici leur sélection de restaurants situés dans la ville où il fait bon vivre. Accompagnées de leurs idées recettes, vous repartirez avec l'envie de manger, qui est, il faut se le dire, toujours un pur plaisirs. </p>
<br style="clear:both;" />
</div>
<div class="left">
<h1>Galerie photos</h1>
<div class="photos">
<a href="DSC_0023.JPG" target="_self"><img src="DSC_0023.jpg" width="100" height="100" border="0" title="cliquez pour agrandir"></a>
<a href="IMG_3363.JPG" target="_self"><img src="IMG_3363.jpg" width="100" height="100" border="0" title="cliquez pour agrandir"></a>
<a href="IMG_3930.JPG" target="_self"><img src="IMG_3930.jpg" width="100" height="100" border="0" title="cliquez pour agrandir"></a>
<a href="Apéro.JPG" target="_self"><img src="Apéro.jpg" width="100" height="100" border="0" title="cliquez pour agrandir"></a>
Regardez avec cette exemple vous devriez vous en sortir :
http://www.css3create.com/Galerie-photo-hover-avec-transition-CSS
Sinon il reste toujours la solution du tableau avec 2 lignes et 2 colonnes mais c'est moins propre et cela s'adapte moins bien aux différents support.
manonhtml
Messages postés5Date d'inscriptionmercredi 2 mars 2016StatutMembreDernière intervention 3 mars 2016 2 mars 2016 à 15:16
D'accord, merci beaucoup.!
Mais les images apparaissent les unes en dessous des autres, comme si elles était positionner en carte. je dois bouger les marges?
pour moi cela serait plus un problème au niveau du css il a pas du prendre en compte les balises ul li (dans le html) ou il en manque une à un endroit pour la fermeture d'une balise ...
comme ça sans le code complet de la page (html/css) difficile à dire.
manonhtml
Messages postés5Date d'inscriptionmercredi 2 mars 2016StatutMembreDernière intervention 3 mars 2016 2 mars 2016 à 15:35
2 mars 2016 à 14:36
Nous aimerions plutôt plusieurs images dans le cadre (4).
Merci
2 mars 2016 à 14:40
http://www.css3create.com/Galerie-photo-hover-avec-transition-CSS
Sinon il reste toujours la solution du tableau avec 2 lignes et 2 colonnes mais c'est moins propre et cela s'adapte moins bien aux différents support.
2 mars 2016 à 15:16
Mais les images apparaissent les unes en dessous des autres, comme si elles était positionner en carte. je dois bouger les marges?
2 mars 2016 à 15:29
comme ça sans le code complet de la page (html/css) difficile à dire.
2 mars 2016 à 15:35
<div class="photos">
<ul>
<li>
<a href="#">
<img src="IMG_3363.JPG" alt="IMG_3363.JPG"/>
<strong>Blabla</strong>
</a>
</li>
<li>
<a href="#">
<img src="IMG_3930.JPG" alt="IMG_3930.JPG"/>
<strong>Blabla</strong>
</a>
</li>
<li>
<a href="#">
<img src="Apéro.JPG" alt="Apéro.JPG"/>
<strong>Blabla</strong>
</a>
</li>
<li>
<a href="#">
<img src="DSC_0023.JPG" alt="DSC_00263.JPG"/>
<strong>Blabla</strong>
</a>
</li>
</ul>
</div>
.ul li {
position:relative;
float:left;
width:100px;
height:100px;
padding:10px;
style:none;
}
.ul li:nth-child(4n) {clear:left;}
.ul li a {
display:block;
overflow:hidden;
width:100px;
height:100px;
margin-top:0px;
margin-left:0px;
border:0px solid rgba(0,0,0,0.7);
transition-property:width, height, margin, z-intex, border;
transition-duration:0,4s;
}
ul li a:hover{
position:absolute;
width:200px;height:200px;
margin-top:-56px;margin-left:-56px;
z-index:100;
border:6px solid rgba(0,0,0,0.7);
}
ul li a img{
position:absolute;
width:100px;height:100px;z-index:20;
transition-property:width,height,z-index;
transition-duration:0.4s;
}
ul li a:hover img{
width:200px;height:200px;
z-index:100;
}
Mais déjà merci beaucoup,!