body {
  background:rebeccapurple;
  color:#fff;
  font-family: 'Solway', serif;
}
h1 {
  text-align: center;
  font-weight: normal;
  text-transform: uppercase;
  font-size: 50px;
  letter-spacing: 2px;
}
.wrapper {
  width: 90%;
  margin: auto;
}
.portrait {
  display: inline-block;
  width: 25%;
  position: relative;
}
img {
  max-width:100%;
  display: block;
  transition:.3s all ease-in-out;
}

.portrait:nth-of-type(1) {
  overflow: hidden;
}
/* .portrait:has([src="img/portrait1.jpg"]) {
  display: none;
} */

/* Faire apparaitre le texte */
.portrait:nth-of-type(1) h2 {
  position: absolute;
  top:50%;
  left:50%;
  font-weight: normal;
  font-size: 40px;
  width: 70%;
  margin: 0;
  text-wrap:balance;
  text-align: center;
  translate:-300% -50%;
  transition:.3s all ease-in-out;
  z-index:2;
}
.portrait:nth-of-type(1):hover h2 {
  translate:-50% -50%;
  transition:.3s all ease-in-out 1s;
}
/* Agrandissement de Josette */
.portrait:nth-of-type(1) img {
  transition:1s all ease-in-out;
  /* opacity:1; */
}
.portrait:nth-of-type(1):hover img {
  scale:1.2;
  /* opacity:0.5; */
}

/* Zone d'overlay noire */
.portrait:nth-of-type(1)::before {
  content:'';
  width: 100%;
  height: 100%;
  position: absolute;
  background:rgba(0, 0, 0, 0.51);
  z-index:1;
  opacity:0;
  transition:.3s all ease-in-out;
}

.portrait:nth-of-type(1):hover::before {
  opacity:1;
}

.portrait:nth-of-type(2)::before {
  content:'';
  width: 0;
  height: 0;
  position: absolute;
  top:50%;
  left:50%;
  translate:-50% -50%;
  background:rgba(0, 0, 0, 0.51);
  border:1px solid rgba(255,255,255,0.5);
  transition:.7s all linear(0 0%, 0 2.27%, 0.02 4.53%, 0.04 6.8%, 0.06 9.07%, 0.1 11.33%, 0.14 13.6%, 0.25 18.15%, 0.39 22.7%, 0.56 27.25%, 0.77 31.8%, 1 36.35%, 0.89 40.9%, 0.85 43.18%, 0.81 45.45%, 0.79 47.72%, 0.77 50%, 0.75 52.27%, 0.75 54.55%, 0.75 56.82%, 0.77 59.1%, 0.79 61.38%, 0.81 63.65%, 0.85 65.93%, 0.89 68.2%, 1 72.7%, 0.97 74.98%, 0.95 77.25%, 0.94 79.53%, 0.94 81.8%, 0.94 84.08%, 0.95 86.35%, 0.97 88.63%, 1 90.9%, 0.99 93.18%, 0.98 95.45%, 0.99 97.73%, 1 100%);
  opacity:0;
}
.portrait:nth-of-type(2):hover::before {
  width: 80%;
  height: 80%;
  opacity:1;
}

.portrait:nth-of-type(2) h2 {
  position: absolute;
  top:50%;
  left:50%;
  translate:-50% -50%;
  opacity:0;
  transition:.3s all ease-in-out;
  margin: 0;
  font-weight: normal;
}
.portrait:nth-of-type(2):hover h2 {
  opacity:1;
  transition:.3s all ease-in-out .7s;
}