JSFiddle - React, Tailwind, and code Playground

HTML

<div id="real" class="photos">
  <figure>
    <img src="https://dummyimage.com/300x150&text=image1.jpg" alt="" />
    <figcaption>légende1</figcaption>
  </figure>
  <figure>
    <img src="https://dummyimage.com/300x150&text=image2.jpg" alt="" />
    <figcaption>légende2</figcaption>
  </figure>
  <figure>
    <img src="https://dummyimage.com/300x150&text=image3.jpg" alt="" />
    <figcaption>légende3</figcaption>
  </figure>
  <figure>
    <img src="https://dummyimage.com/300x150&text=photo.jpg" alt="R" />
    <figcaption>unephoto</figcaption>
  </figure>
  <figure>
    <img src="https://dummyimage.com/300x150&text=img_3982.jpg" alt="" />
    <figcaption>et voila.</figcaption>
  </figure>

</div>

CSS

body {
  margin: 0;
}

* {
  box-sizing: border-box;
}

.photos {
  height: 100vh;
  overflow-x: scroll;
  overflow-y: hidden;
  display: flex;/* en pluche */
  /* en moinche : position */
}

.photos figure {
  position: relative;/* en pluche */
  padding: 0;
  height: 90%;
  border: solid;
}

.photos figure img {
  height: 100%;
  min-width: 100%;/* en pluche */
  object-fit: cover;/* en pluche */
  display: block;
  margin: 0;
}

.photos figure figcaption {
  position: absolute;
  bottom: 0;/* en pluche */
  left: 0;/* en pluche */
  right: 0;/* en pluche */
  padding: 0.5em;
}

.photos figure figcaption {
  background-color: #676767;
  background-color: hsla(0, 0%, 60%, 0.5);
  text-shadow: 1px 1px 1px #000000;
  display: none;
}

figure:hover figcaption {
  display: inline-block;
}