Reports

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <style>
    body {
      margin: 0;
      padding: 20px;
      display: flex;
      justify-content: center;
      align-items: center;
      height: 100vh;
      background: #f0f0f0;
      font-family: sans-serif;
    }

    .flip-card {
      width: 300px;
      max-width: 90%;
      aspect-ratio: 3 / 2;
      perspective: 1000px;
    }

    .flip-card-inner {
      position: relative;
      width: 100%;
      height: 100%;
      transition: transform 0.6s;
      transform-style: preserve-3d;
    }

    .flip-card:hover .flip-card-inner {
      transform: rotateY(180deg);
    }

    .flip-card-front,
    .flip-card-back {
      position: absolute;
      width: 100%;
      height: 100%;
      backface-visibility: hidden;
    }

    .flip-card-front img,
    .flip-card-back img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      display: block;
      border-radius: 10px;
    }

    .flip-card-back {
      transform: rotateY(180deg);
    }
  </style>
</head>
<body>

  <div class="flip-card">
    <div class="flip-card-inner">
      <div class="flip-card-front">
        <img src="https://www.w3schools.com/html/img_girl.jpg" alt="Front Image">
      </div>
      <div class="flip-card-back">
        <img src="https://www.w3schools.com/html/pic_trulli.jpg" alt="Back Image">
      </div>
    </div>
  </div>

</body>
</html>
Test here :
https://www.w3schools.com/tags/tryit.asp?filename=tryhtml_image_test
79738965
