28172 sujets

CSS et mise en forme, CSS3

Construction d'une galerie en css avec changement d'image au survol

Salut à tous,

Je construis une galerie photo en css, avec ouverture d'une lightbox lorsque l'on clique sur une photo. Cette partie là est déjà codée, je coince sur une autre "fonctionnalité".

Je souhaiterais en effet qu'au survol sur une image, une seconde apparaisse pour créer un effet sympa.

Quelqu'un peut-il m'aiguiller ?

Une partie du code html de la galerie :


<div class="galerie">
	<a href="images/galerie/1.jpg" rel="prettyPhoto" title=""><img src="images/galerie/1.jpg" alt="" /></a>
	<h3>Titre</h3>
	<p>Description</p>
</div>
<div class="galerie">
	<a href="images/galerie/2.jpg" rel="prettyPhoto" title=""><img src="images/galerie/1.jpg" alt="" /></a>
	<h3>Titre</h3>
	<p>Description</p>
</div>
.
.
.


Une partie du code CSS en rapport :


.galerie {
	float: left;
	width: 23.5%;
	margin: 0 2% 20px 0;
}

.galerie img {
	max-width: 100%;
        display: block;
}


Merki d'avance Smiley smile
Modérateur
Bonjour,

Je pense que :hover pourra t'aider a faire ça.


EDIT : Ou "onMouseOver" en JavaScript vu que ce n'est pas une image de fond mais une balise image
Modifié par _laurent (01 Feb 2012 - 15:01)
salut,

j'ai essayé en ajoutant la propriété :hover comme ceci :


.galerie a:hover {
display: block;
background: #000
}


Mais il manque quelque chose le background reste pour ainsi dire "invisible".

Par contre si j'ajoute une hauteur au code précédent plus grande que l'image le fond apparaît sous celle-ci au survol donc je pense que je ne suis pas trop loin ?
Modérateur
ryosan a écrit :
j'ai essayé en ajoutant la propriété :hover

En fait :hover va te servir a modifier le style de ton lien. Par exemple :
a{color:#FF0000;}
a:hover{color:#0000FF;}

Ici, comme je l'ai dit dans l’edit de mon premier message, tu insères l'image via une balise html <img/> et non en paramètre CSS background. Si tu veux changer l'image il faudra que tu utilise la fonction onMouseOver en JavaScript
Modifié par _laurent (01 Feb 2012 - 15:23)
Laurie-Anne a écrit :
Bonjour,

Il va falloir utiliser du JavaScript.


Ou modifier le code pour que l'image ne soit plus affichée en HTML mais grâce à CSS ?
Gothor a écrit :
Ou modifier le code pour que l'image ne soit plus affichée en HTML mais grâce à CSS ?
L'image étant un lien ET un contenu, cette solution n'est pas envisageable. Que ce soit d'un point de vue accessibilité ou référencement.
Laurie-Anne a écrit :
Bonjour,

Il va falloir utiliser du JavaScript.



bonjour merci pour la réponse, j'ai quelques notions en js,

un effet est possible avec le code suivant sauf erreur de ma part :


$('.galerie').hover(function() {
	$(this).find('img').stop().animate({ 'opacity': '0.05' }, 'fast');
}, function() {
	$(this).find('img').stop().animate({ 'opacity': '1' }, 'fast');
});


Le souci est que l'effet se "produit" également lors du survol du titre ou de la description de l'image. Est-il possible de limiter l'effet uniquement au survol de l'image ?

PS: peut-être faut-il déplacer le post dans le sous-forum javascript ?
Modérateur
ryosan a écrit :
Est-il possible de limiter l'effet uniquement au survol de l'image ?

En attribuant une classe a ton image ou ta balise <a>
Sujet clos
Aller à