Rollover fade sur image responsive

Bonsoir,

Je suis en train de créer un site responsive qui comporte une galerie composée d'images fluides. Pour cela il me faut utilisé le css img {max-width:100%;} et sur mes images au rollover , je veux un effet fade qui laisse progressivement apparaitre l'image en hover.

Est-ce que quelqu'un as une solution pour faire ça ?

Jusqu'à présent, toutes les solutions que j'ai essayé, ne marchent pas avec le css img {max-width:100%;}

Merci beaucoup pour votre aide !

Bonsoir,

Pour l'effet d'opacité vous pouvez faire cela:

img {
		opacity:0.3;
	 transition-property: opacity;
         transition-duration: 2s;
         transition-delay: 1s;
	 }
	 
	img:hover{opacity:1;}

En pensant à préfixer "transition"

et pour les images je vous conseille ce lien

Je ne sais pas si je peux utiliser opacity car il me faudrait superposer deux images avec les positions absolute et relative. Le problème est qu' à chaque fois que j'ai utilisé cette solution les images n'apparaissaient pas car elles ne supportaient pas les positions absolute et relative avec img {max-width:100%;}

Vous voyez ce que je veux dire ?

Désolé, avez-vous un exemple sur lequel s'appuyer.