Signaler

Comment faire une galerie css simple ?

Posez votre question raphituc 159Messages postés mardi 30 octobre 2007Date d'inscription 23 octobre 2013 Derniè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
Afficher la suite 
Utile
+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
Utile
+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
Utile
+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 558Messages postés mardi 16 mars 2010Date d'inscription 26 novembre 2015 Derniè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 2013 Derniè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 558Messages postés mardi 16 mars 2010Date d'inscription 26 novembre 2015 Derniè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
Utile
+0
moins plus
le mieux c de voir du côté jquery !!
Ajouter un commentaire

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.

Vous n'êtes pas encore membre ?

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