arq-front_image-dithered/style.css

body{
  /* affichage du contenu en colonne */
  display: flex;
  flex-direction: column;
  align-items: center;
  /* style background et font */
  background-color: black;
  color: white;
  font-family: sans-serif;
}

section{
  width: 100%;
  /* affichage des images en lignes avec retour à la ligne (wrap)*/
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
}

h1,h2,h3,h4,h5,h6{
  text-decoration-line: underline;
  text-decoration-color: fuchsia;
}

/* Styling des liens */
a{
  color: white;
  text-decoration-color: fuchsia;
}

/* lors du hover : fushia */
a:hover,
a:active,
a:focus,
a:focus-within {
  color: fuchsia;
}

img{
  /* Normalize images */
  display: block;
  /* taille des images */
  width: 300px;
}

div{
  /* position relative pour la >p absolute */
  position: relative;
  /* background pour l’effet blend de l’image */
  background-color: rgb(255, 20, 255);
  /* Prends la taille des images */
  height: fit-content;
  /* Centre les rectangles avec les carrés dans le row (ex: image interlopes)*/
  align-self: center;
}

div>p{
  /* N’affiche pas la balise p par défaut */
  display:none;
  /* Fixe la position du p à l’intérieur de la div / de l’image, au centre */
  position: absolute;
  bottom: calc((100% / 2) - 1em);
  /* style du paragraphe */
  margin: 10px 0;
  width: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  /* style de la font */
  color: white;
  font-size: larger;
  font-weight: bolder;
  /* centre le texte */
  text-align: center;
}

/* HOVER */

/* Simule un élément interactif pour le proto (le pointer change) */
div:hover{
  cursor: pointer;
}

/* lors du hover de la div : blend le background de la div avec l’image */
div:hover>img{
  mix-blend-mode:multiply;
}

/* Lors du hover de la div, afficher le paragraphe */
div:hover>p{
  display: block;
}