[Résolu] Problème d'opacité

Bonjour,

Je me suis lancé dans la conception d'un site depuis peu et un problème s'est posé à moi : un problème d'opacité. En effet, je voudrais que lorsqu'on survol un rectangle contenant une image et du texte, son opacité passe de 0.5 à 0.9. En revanche, je voudrais que l'opacité de l'image et du texte soit en tout temps de 1. J'ai codé ce qui selon moi était bon mais je me retrouve avec ceci : lorsque je ne survol pas ce rectangle, l'opacité de l'image et du texte, est moindre que si elle était en dehors de ce rectangle. Voilà mon codage :

<a href="http://www.google.fr" class="CelluleTrail">
  <section class="Trail">
    <img src="V.png" class="ImageTrail"/>
    <h1> Trail </h1>		
  </section> 
</a>

et le CSS :

 .Trail {
  position: absolute;
  top: 200px;
  left: 70px;
  height: 400px;
  width: 250px;
  border: 3px grey solid;
  border-radius: 10px;
  background-color: grey;
  opacity: 0.5;
}

 .Trail:hover {
   opacity: 0.9;
}

.ImageTrail {
  position: absolute;
  height: 250px;
  width: 150px;
  top: 260px;
  left: 120px;
}

h1 {
 position: absolute;
 top: 520px;
 left: 170px;
 font-family: DIN Condensed;
 font-size: 2.3em;
 color: white;
 opacity: 1;
 text-decoration: none;
 display: block;
}

*Merci d'utiliser les balises de colorisation syntaxique et de supprimer les numéro de ligne.

Merci pour votre temps !
Lucas
Modifié par 6l20 (25 Jun 2014 - 20:47)

Bonjour,

C’est le comportement normal et attendu de la propriété opacity : tu diminues l’opacité d’un bloc, il est logique que tout le bloc baisse en opacité, non ?

Pour contourner ce comportement, il te faudra(it) effectivement dissocier les deux éléments.

Cependant d’après ton CSS, l’effet recherché concerne uniquement la couleur de fond et la couleur des bordures de ton .Trail, me trompe-je ? Dans ce cas, n’utilises pas opacity mais plutôt des valeurs de couleurs en hsla / rgba : le a final signifie alpha, il s’agit de l’opacité.

Bonjour,

Merci pour ta réponse !
Au niveau du CSS ça donnerait ça ?

.Trail 
{
	position: absolute;
	top: 200px;
	left: 70px;
	height: 400px;
	width: 250px;
	border: 3px rgba(153,153,153,0.5) solid;
	border-radius: 10px;
	background-color: rgba(153,153,153,0.5);
}

.Trail:hover
{
	color: rgba(153,153,153,0.9);

}

Tout à fait, sauf que c’est le background-color que tu veux changer au :hover, pas la couleur

Tu pourrais faire ceci :

.Trail:hover
{
	background-color: rgba(153,153,153,0.9);
        border-color: rgba(153,153,153,0.9);
}

Et a priori ça fera ce que tu attends

Super, merci à toi, ça marche nickel