Opacité image CSS Html

Résolu

Marion -
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 !!!

Afficher la suite

A voir également:

Opacité image CSS Html
Editeur html - Télécharger - HTML
Légende image word - Guide
Reduire taille image - Guide
Image iso - Guide
Acronis true image gratuit - Télécharger - Sauvegarde

1 réponse

RAD ZONE Messages postés 5362 Statut Contributeur 1 360

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  */
}

RAD ZONE Messages postés 5362 Statut Contributeur 1 360

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  */ 
}

Marion

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 5362 Statut Contributeur 1 360

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+

Marion

Merci pour ces détails je vais tenter !!!
0

Opacité image CSS Html

1 réponse

Discussions similaires

Newsletters