Bonjour,

Voici mon nouveau design pour mon site:
http://img183.imageshack.us/img183/9686/newdesignyh3.png

En fait voila, j'aimerais que quand le visiteur passe son curseur sur un des "blocs", l'image avec le logo en 3d devient plus claire, niveau design, je sais le faire, mais c'est point de vue css maintenant...

Comment faire pour que tout le bloc soit un même lien cliquable et faire cet effet?


Merci d'avance,
Ludo29

Bonjour,

Tu as tellement de possibilités différentes...
Personnellement, en instinct primaire, je ferais un truc du genre :



Le block te permet de ne plus avoir le lien comme un élément "en ligne", donc de lui attribuer une taille précise. Le float left, je ne l'ai mis que pour le placement de tes divers liens... Le padding-top, c'est pour écrire dans la case réservée à cet effet. Et enfin, l'image en fond, c'est ce qui te permet de changer en CSS

Salut,

Avec une seule image :

XHTML :



CSS



Problème : c'est du css 3, pas compatible avec IE 6, ses clones et sans doute quelques autres ...

Sinon tu utilises une seule image qui contient les deux effets et tu joues sur les marges au moment du hover.

++

Merci à vous 2,

Bonne journée,
Ludo29

Je viens de tester la méthode de KnockedMaster, elle fonctionne mais petit, soucis, un horrible cadre bleu vient s'ajouter autour ainsi qu'un petit décalage, comment remédier à ce problème?

Voici une capture d'acran:
http://img187.imageshack.us/img187/6799/scrnwt9.jpg

Hello,

Suis de retour de ma petite rando VTT

Tu dois ajouter simplement ceci dans ta css :



Bonne fin d'après-midi !

++

Edit : Le opacity varie entre 0 et 1, au cas où ...

Merci compatriote,
ça fonctionne nickel, comment n'y ai-je pas pensé...


Bonne fin de journée,
Ludo29