Bonjour gang !
Aujourd’hui on va parler un peu de CSS, comment changer le comportement de plusieurs éléments au survol du parent.


Il y a quelques jours un ami non développeur est venu me demander conseil parce qu’il n’arrivait pas à obtenir l’effet souhaité sur son site.

Pour notre exemple nous l'appellerons Albert. Voyons ensemble de quoi il s’agit :

Albert sur son site, liste ses réalisations. Pour chaque réalisation nous avons un élément englobant, une image et un texte.
voici le html pour une réalisation :

<article class="article-demo">
  <a href="" class="article-demo__link">
    <img class="article-demo__thumb" srcset="https://cdn.mos.cms.futurecdn.net/vChK6pTy3vN3KbYZ7UU7k3-1200-80.jpg" alt="lorem ipsum" />
    <div class="article-demo__desc">
      <h2>Demo test</h2>
      <p> Lorem ipsum dolor sit amet, consectetur   adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </p>
    </div>
  </a>
</article>

Et le css de base :

.article-demo__link {
  border:1px solid transparent;
  display: flex;
  width: 600px;
  text-decoration: none;
  color: #000;
}
.article-demo__thumb {
    width: 40%;
}
.article-demo__desc {
  width: 60%;
  padding: 20px;
  & h2 {
    margin-top: 0;
  }
}

La problématique est la suivante :
Albert voudrait que lors du survol de l’élément englobant celui-ci apparaisse avec une bordure violette et que l’opacité de l'image change.

Grace au CSS il est possible de le faire. Pour cela il faut commencer par cibler l'élément qui va déclencher l'action quand on le survolera grâce au :hover :

.article-demo__link:hover {
    border: 1px solid purple;
}

maintenant que l'on a l'action sur l'élément englobant on a résolu une partie du problème d'Albert: la bordure violette.
Attaquons-nous maintenant au changement d'opacité de l'image. Dans mon exemple codepen que vous trouvez à la fin j'utilise scss, mais je vous met les deux façons possible de le faire (css / scss) :

.article-demo__link:hover {
	& .article-demo__thumb {
    	opacity: 0.5;
  	}
}
scss version
.article-demo__link:hover .article-demo__thumb {
    	opacity: 0.5;
}
css version

Et voilà le problème d'Albert est résolut !
Vous trouverez en fin de page un exemple vivant sur codepen pour illustrer cet article.

N'hésitez pas à me donner vos feedbacks sur Twitter @beezy_cs ou sur Facebook et à partager l'article si vous l'avez aimé.

À très vite.

exemple sur codepen