Superposition d'images avec du CSS - Forum HTML / CSS / XHTML

La Communauté Webmaster

  Forum-webmaster
  Technique - programmation
  HTML / CSS / XHTML (Modérateurs: Shain, Netah, Lilian, lauryv, ToToMaStEr)
  Superposition d'images avec du CSS

« Précédent Suivant »

Pages: [1]

Auteur

Sujet: Superposition d'images avec du CSS (Lu 1556 fois)

Superposition d'images avec du CSS
« sur: le 16-05-2012 a 15:43:58 »

actumoteurs
Membre récent

Hors-Ligne

Messages: 44

Bonjour à tous,

Voilà mon problème. Je suis en train de chercher une solution pour donner un effet de transition au passage de la souris sur l'image.

Voici ce que j'ai déjà, pourriez-vous m'aider à modifier svp?

http://jsfiddle.net/9RFdv/8/

Le résultat devrait être identique à ce site:

http://www.charlespic.com/ (les images en bas pour les réseaux sociaux).

Cordialement,

Nathan.

Rapporter au modérateur

Re:Superposition d'images avec du CSS
« Répondre #1 sur: le 16-05-2012 a 19:28:47 »

WebD
Superactif

Hors-Ligne

Sexe: Male

Messages: 938

Pour faire ce genre d'effets tu peux utiliser du CSS3 avec transitions et animations.
Il y a pas mal de tutos sur le web.

Bon courage.

Rapporter au modérateur

Agence Web | Sticker MacBook | Lunettes personnalisées

Re:Superposition d'images avec du CSS
« Répondre #2 sur: le 16-05-2012 a 19:36:39 »

actumoteurs
Membre récent

Hors-Ligne

Messages: 44

Merci. Je vous tiens au courant.

Rapporter au modérateur

Re:Superposition d'images avec du CSS
« Répondre #3 sur: le 17-05-2012 a 15:32:44 »

vieactu
Superactif

Hors-Ligne

Messages: 503

Tu peux utiliser du java onmouseover ou du Jquery...

Rapporter au modérateur

Re:Superposition d'images avec du CSS
« Répondre #4 sur: le 17-05-2012 a 20:11:42 »

Memocontacts
Membre récent

Hors-Ligne

Messages: 4

Hello,
Citation:
Tu peux utiliser du java onmouseover ou du Jquery...
Attention, Javascript n'est pas java !
Et si on peut se passer de JS, c'est quand même mieux.

Rapporter au modérateur

Une publicité géolocalisée pour 10€/AN

Re:Superposition d'images avec du CSS
« Répondre #5 sur: le 06-07-2012 a 15:45:58 »

Pti Biscuit
Membre récent

Hors-Ligne

Messages: 30

Code:

#logoraw {
display : block;
width : 180px;
height : 52px;
background : url(http://img.actu-moteurs.com//uploads/2012/04/raw2.png);
}
#logoraw:hover {background : url(http://img.actu-moteurs.com//uploads/2012/04/raw.png);
-webkit-transition: all .3s ease-in;
-moz-transition: all .3s ease-in;
-o-transition: all .3s ease-in;
transition: all .3s ease-in;
}