Bonjour,

Je suis actuellement sur la construction d'un site et je suis bloqué sur un truc tout bête... J'ai une image et je souhaiterai y ajouter un voile de couleur lors du survol de l'image, mais je ne sait pas du tout comment m'y prendre, après avoir cherché et testé plusieurs solutions cela ne fonctionne toujours pas (ou pas comme je voudrait). Je tente donc ma chance ici

Voici le code que j'ai pour le moment  HTML : 

<div class="team-member rollopaque">
                        <a href="#robot"><img class="mx-auto rounded-circle" src="img/composants/robot.JPG" alt="Robot"></a>
                        <h4>Robot</h4>                       
                    </div>
                </div>

CSS : 

.rollopaque img {
  opacity: 1.0;
  filter:alpha(opacity=100);
  border:0;
  }

.rollopaque:hover img {
  opacity: 0.5;
  filter:alpha(opacity=50); 
   border:0; 
   }
   
.rollopaque:hover {
  background:#FFF;
}

Le soucis est que lors du survol c'est un carré entier que se voile et non pas juste l'image :/ je ne sais pas comment régler ce petit soucis....

-
Edité par EmmanuelGuimbretière 23 août 2017 à 11:46:21

Salut,

Si tu ne veux pas de fond blanc au survol, il suffit de supprimer le background: #FFF sur le .rollopaque:hover.

Bonne journée,

Bonjour, 

As tu essayé d'appliquer le 'hover' sur l'image ? 

.rollopaque img:hover {
  opacity: 0.5;
  filter:alpha(opacity=50);
   border:0;
   }