Apparition en hover...

Bonjour,
j'ai une image comme celle-ci : http://img209.imageshack.us/img209/7239/kem3.jpg

J'aimerais qu'à la base en retouchant le code, elle apparaisse comme ceci :
http://img196.imageshack.us/img196/4025/t5pp.png , donc rajout de BG et de shadow, à la limite je suis capable de le faire,

MAIS, et c'est la que je bloque depuis 3 jours, j'aimerais qu'au survol, elle apparaisse comme ça :
http://img841.imageshack.us/img841/311/f50r.png , donc avec une opacité moindre, et un petit plus au milieu (qui est une petite image png), et que tout ça apparaisse en léger fondu.

Je bloque depuis 3 jours, et je n'arrive pas du tout à faire ça, si une âme chritable pourrait essayer de trouver un code ce serait génial...

Merci d'avance !

3 réponses

  1. Modérateur
    Ce sujet va être déplacer dans la section webmastering, il ne s'agit pas de programmation.
    1. Merci c'est cool, mais ce n'est qu'une image d'exemple que j'ai donné, il y aura une vaingtaine d'images qui seront changées tous les mois, donc cette technique là n'est pas du tout pratique, il faudrait vraiment un code permettant de faire cet effet automatiquement
      1. Dans ce cas là, il faut se tourner vers du JavaScript à mon avis, mais je ne fait que débuté pour celui-là.
    2. Plutot que de donner des propriétés css à l'image, crée les deux images telles que tu voudrais qu'elles soient. Mettont que celle par défaut s'appele "AAA.jpg" et que celle à afficher au survol soir "BBB.jpg".

      Vu que l'on va utiliser la fonction "hover", on va devoir tricher un peu:
      HTML:
      <div class="mon_image"></div>
      CSS:
            .mon_image
      {
            background-image: urtl('AAA.jpg') no-repeat; /* On définis l'image souhaitée en arrière-plan */
            width: 314px; /* On donne la largeur pour être sur que l'image soit affichée en entier */
            height: 304px; /* La hauteur... */
      }
            .mon_image:hover
      {
            background-image: urtl('BBB.jpg') no-repeat; /* On définis l'arrière-plan du survol */
      }


      Voila, si je ne me suis pas trompé, ça marche.
      En gros, du places une baliste factice, et via un code CSS, tu lui donne un arrière-plan en précisant sa hauteur et sa largeur (ceux de l'image, sinon elle sera rognée ou il y aura du vide autour).
      Grâce au "hover", tu assignes un arrière-plan différant.

      PS: Pour palier d'éventuels problemes de positionnement/déplacement; essaye ça:
            .mon_image
      {
            text-align: center;
            vertical-align: center;
            background-position: center;
      }


      PS2: Dans le hover, n'écris que ce qui dois changer, pas besoin de repréciser inutilement le reste.