Comment faire une galerie css simple ?
raphituc
Messages postés
159
Date d'inscription
Statut
Membre
Dernière intervention
-
razily Messages postés 250 Date d'inscription Statut Membre Dernière intervention -
razily Messages postés 250 Date d'inscription Statut Membre Dernière intervention -
Bonjour,
J'aimerais réaliser une galerie photo en CSS sur le principe suivant : une grille de miniatures des photos, et lorsqu'on passe la souris sur une image, elle s'agrandit et recouvre les images voisines.
Ma difficulté est au moment où l'image s'agrandit, elle ne recouvre pas les autres : elle les bouscule et le reste des image est décalé.
Merci
Raphaël
J'aimerais réaliser une galerie photo en CSS sur le principe suivant : une grille de miniatures des photos, et lorsqu'on passe la souris sur une image, elle s'agrandit et recouvre les images voisines.
Ma difficulté est au moment où l'image s'agrandit, elle ne recouvre pas les autres : elle les bouscule et le reste des image est décalé.
Merci
Raphaël
A voir également:
- Comment faire une galerie css simple ?
- Iphone 14 simple - Guide
- Galerie photo en ligne gratuite - Guide
- Simple pdf - Télécharger - PDF
- Comment masquer une photo dans la galerie - Guide
- Simple ocr - Télécharger - Bureautique
4 réponses
Salut, d'après moi, au moment ou tu change le width de l'image, lors du survol de celle-ci par la sourie, je pense qu'il faut aussi à ce moment là, la passer en position:absolute (css).
J'ai essayé, ça ne marche pas, ça bloque même l'effet d'agrandissement.
Mais je vous met le code dans le message suivant.
Mais je vous met le code dans le message suivant.
Le Code CSS :
body {
margin:0;
text-align: center;
}
#images1{
text-align: center;
width:624px;
height:150px;
}
#images1 img{
height:141px;
width:200px;
text-align: center;
position:relative;
box-shadow: 0px 0px 0px #8e8e8e;
-webkit-transition:all 300ms ease-in-out;
transition:all 300ms ease-in-out;
-moz-transition:all 300ms ease-in-out;
}
#images1 img:hover{
height:161px;
width:240px;
position:absolute;
box-shadow: 0px 0px 7px #8e8e8e;
-webkit-transition:all 300ms ease-in-out;
transition:all 300ms ease-in-out;
-moz-transition:all 300ms ease-in-out;
}
body {
margin:0;
text-align: center;
}
#images1{
text-align: center;
width:624px;
height:150px;
}
#images1 img{
height:141px;
width:200px;
text-align: center;
position:relative;
box-shadow: 0px 0px 0px #8e8e8e;
-webkit-transition:all 300ms ease-in-out;
transition:all 300ms ease-in-out;
-moz-transition:all 300ms ease-in-out;
}
#images1 img:hover{
height:161px;
width:240px;
position:absolute;
box-shadow: 0px 0px 7px #8e8e8e;
-webkit-transition:all 300ms ease-in-out;
transition:all 300ms ease-in-out;
-moz-transition:all 300ms ease-in-out;
}
c'est pas compliquer, il faut que tes images possède des id différents (j'écris les code à la volé donc y'aura peut être de erreurs):
Puis dans le code javascript que tu peux placer dans le head de ta page entre les balise script:
Je pense que ce code est un bon point de départ.
<img onmouseover="agrandi('image1')" onmouseout="reduit('image1')" id="image1" src="x.jpg"/>
<img onmouseover="agrandi('image2')" onmouseout="reduit('image2')" id="image2" src="y.jpg"/>
Puis dans le code javascript que tu peux placer dans le head de ta page entre les balise script:
function agrandi(id){
var img=document.getElementById(id);
img.style.width="400px";
img.style.position="absolute";
}
function reduit(id){
var img=document.getElementById(id);
img.style.width="50px";
img.style.position="relative";
}
Je pense que ce code est un bon point de départ.
