Opacité image CSS Html

Résolu/Fermé
Marion - 12 déc. 2011 à 20:11
 Marion - 17 déc. 2011 à 16:46
Bonjour,


Je suis en train de créer mon site web. Dans la page d'accueil j'ai 4 photos qui amènent à des pages internes. Elles font office de menu secondaire.

J'aimerai qu'au survol de la souris, l'opacité de l'image change: qu'elle devienne plus foncée.
J'ai essayé divers codes qui ne fonctionnent pas.

Ma question est: le code CSS, je peux le mettre où je veux dans ma feuille de style ??
Puis dans mon html, je mets dans mon image après title par exemple: class="..." ?

Est ce que je le fais au bon endroit ? dans le CSS ? et dans l'HTML ?

J'ai mis cela par exemple comme code CSS:
.exemple:hover
{
opacity: 1;
-moz-opacity: 1;
-khtml-opacity: 1;
filter: alpha(opacity=100);
}

Si vous avez des propositions, merci d'avance !!!
A voir également:

1 réponse

Réponse 1 / 1
RAD ZONE Messages postés 5230 Date d'inscription samedi 20 janvier 2007 Statut Contributeur Dernière intervention 17 août 2024 1 360
12 déc. 2011 à 21:09
Salut

sur tes images ou ta class tu met quelque chose comme ca 

img
{
opacity:0.4;
filter:alpha(opacity=100); /* pour IE8 et anterieur */
}
img:hover
{
opacity:1.0;
filter:alpha(opacity=50); /* pour IE8 et anterieur  */
}


a+
0
RAD ZONE Messages postés 5230 Date d'inscription samedi 20 janvier 2007 Statut Contributeur Dernière intervention 17 août 2024 1 360
Modifié par RAD ZONE le 12/12/2011 à 21:49
EDIT J AI CORRIGE UNE ERREUR SUR LE CODE QUE J AVAIS MIS PLUS HAUT
VOILA LE BON CODE 

img 
{ 
opacity:0.4; 
filter:alpha(opacity=40); /* pour IE8 et anterieur */ 
} 
img:hover 
{ 
opacity:1.0; 
filter:alpha(opacity=100); /* pour IE8 et anterieur  */ 
}
0
Marion
16 déc. 2011 à 20:23
Merci pour ta réponse dont je viens de prendre connaissance

Mais ce code: je le mets bien dans ma feuille CSS ? et qu'est ce que je mets dans mon html où j'ai mes images sur lesquelles je veux appliquer cela ?

Où dois je mettre ce code ?

Merci pour ta réponse ! C'est la premiere fois que je tente de toucher ma feuile CSS

MERCI
0
RAD ZONE Messages postés 5230 Date d'inscription samedi 20 janvier 2007 Statut Contributeur Dernière intervention 17 août 2024 1 360
16 déc. 2011 à 22:11
Salut

tu met ce code dans ta css !

mais tel quel il doneras cette opacite a toutes les images de la page !

pour ne l apliquer que a une image , il faut donner une class ou une id a l image !

de meme pour uniquement les images d une div , ou autre element, la c est a la div que tu donne une class ou une id !

exemple avec plusieurs opacite sur id et class et couleur background differente ! 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
  <head>
    <title>
      RAD ZONE Webcreation
    </title>
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
    <style type="text/css">
/*<![CDATA[*/
    body{
      background: #222;
      margin: 0;
    }

    #container{
      background: #6a6a6a;
      height: 600px;
      left: 50%;
      margin-left: -400px;
      margin-top: -300px;
      position: absolute;
      top: 50%;
      width: 800px;
    }

    img {
      height: 250px;
      width: 350px;
      border: none;
    }

    #blocs1{
      background: #c4c4c4;
      float: left;
      height: 250px;
      margin: 25px;
      width: 350px;
    }

    #blocs2{
      background: #348;
      float: right;
      height: 250px;
      margin: 25px;
      width: 350px;
    }

    #blocs3{
      background: #954;
      float: left;
      height: 250px;
      margin: 25px;
      width: 350px;
    }

    #blocs4{
      background: #000;
      float: right;
      height: 250px;
      margin: 25px;
      width: 350px;
    }

    #blocs1 img {
      opacity: 0.4;
      filter:alpha(opacity=40);
    }

    #blocs1 img:hover {
      opacity: 1.0;
      filter:alpha(opacity=100);
    }

    #blocs2 img {
      opacity: 1.0;
      filter:alpha(opacity=100);
    }

    #blocs2 img:hover {
      opacity: 0.2;
      filter:alpha(opacity=20);
    }

    .trois img {
      opacity: 0.6;
      filter:alpha(opacity=60);
    }

    .trois img:hover {
      opacity: 1.0;
      filter:alpha(opacity=100);
    }

    img.quatre {
      opacity: 0.2;
      filter:alpha(opacity=20);
    }

    img.quatre:hover {
      opacity: 0.7;
      filter:alpha(opacity=70);
    }

    /*]]>*/
    </style>
  </head>
  <body>
    <div id="container">
      <div id="blocs1">
        <img src="02.jpg" alt="img" />
      </div>
      <div id="blocs2">
        <img src="16.jpg" alt="img" />
      </div>
      <div id="blocs3" class="trois">
        <img src="21.jpg" alt="img" />
      </div>
      <div id="blocs4">
        <img src="23.jpg" alt="img" class="quatre" />
      </div>
    </div>
  </body>
</html>


le resultat de ce code donne cette exemple

je pense que tu devrais t en sortir ! :-))

a+
0
Marion
17 déc. 2011 à 16:46
Merci pour ces détails je vais tenter !!!
0

Discussions similaires

PIX
plart -
jordane45 -

1 réponse
la balise <br> ou <br />
faamugol -
rwaness -

8 réponses
<br> ou <br /> ou </br>
corentin.93 -
jessy006 -

11 réponses
Impossible de télécharger photos messenger
Morgane -
Utilisateur anonyme -

1 réponse
Comment recadrer une image avec Inkscape
infofeet -
TELLIEZ -

13 réponses