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:

Opacité image CSS Html
Image iso - Guide
Editeur html - Télécharger - HTML
Acronis true image - Télécharger - Sauvegarde
Faststone image viewer - Télécharger - Visionnage & Diaporama
Google recherche par image - Guide

1 réponse

Réponse 1 / 1

RAD ZONE Messages postés 5224 Date d'inscription samedi 20 janvier 2007 Statut Contributeur Dernière intervention 22 mars 2024 1 353
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  */
}

RAD ZONE Messages postés 5224 Date d'inscription samedi 20 janvier 2007 Statut Contributeur Dernière intervention 22 mars 2024 1 353
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  */ 
}

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

RAD ZONE Messages postés 5224 Date d'inscription samedi 20 janvier 2007 Statut Contributeur Dernière intervention 22 mars 2024 1 353
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+

Marion
17 déc. 2011 à 16:46

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

Discussions similaires

Retrouver l'image originale après avoir fait des modifications ?

Image cliquable dans html

Espace en HTML

[CSS] Forcé retour à la ligne

Discussions similaires

Newsletters