Posez votre question Signaler

Comment faire une galerie css simple ?

raphituc 159Messages postés mardi 30 octobre 2007Date d'inscription 23 octobre 2013Dernière intervention - Dernière réponse le 2 mars 2012 à 15:45
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
Lire la suite 
Réponse
+0
moins plus
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).
Ajouter un commentaire
Réponse
+0
moins plus
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.
Ajouter un commentaire
Réponse
+0
moins plus
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;
}
dariumis 550Messages postés mardi 16 mars 2010Date d'inscription 17 avril 2015Dernière intervention - 2 mars 2012 à 14:08
ha ok, je pensais que tu le faisait en javascript, d'après moi faut le faire en javascript, en utilisant onMouseOver(), onMouseOut().
Répondre
raphituc 159Messages postés mardi 30 octobre 2007Date d'inscription 23 octobre 2013Dernière intervention - 2 mars 2012 à 14:09
Mince, je ne connais rien en javascript. Et puis, je pense ne pas être loin de la solution, mais merci pour votre aide.
Répondre
dariumis 550Messages postés mardi 16 mars 2010Date d'inscription 17 avril 2015Dernière intervention - 2 mars 2012 à 14:19
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):

<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.
Répondre
Ajouter un commentaire
Réponse
+0
moins plus
le mieux c de voir du côté jquery !!
Ajouter un commentaire
Ce document intitulé «  Comment faire une galerie css simple ?  » issu de CommentCaMarche (www.commentcamarche.net) est mis à disposition sous les termes de la licence Creative Commons. Vous pouvez copier, modifier des copies de cette page, dans les conditions fixées par la licence, tant que cette note apparaît clairement.

Vous n'êtes pas encore membre ?

inscrivez-vous, c'est gratuit et ça prend moins d'une minute !

Les membres obtiennent plus de réponses que les utilisateurs anonymes.

Le fait d'être membre vous permet d'avoir un suivi détaillé de vos demandes.

Le fait d'être membre vous permet d'avoir des options supplémentaires.