Preview:
<!DOCTYPE html>
<html lang="fr">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Animation de Carte</title>
  <style>
    @font-face {
      font-family: 'Satoshi-Medium';
      src: url('https://d1yei2z3i6k35z.cloudfront.net/1970629/66b23470627c0_Satoshi-Medium.ttf') format('truetype');
      font-weight: normal;
      font-style: normal;
    }

    @font-face {
      font-family: 'Square721BTRoman';
      src: url('https://d1yei2z3i6k35z.cloudfront.net/1970629/669a71400c0c2_square721_bt_roman.ttf') format('truetype');
      font-weight: normal;
      font-style: normal;
    }

    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }

    .container {
      width: 100%;
      display: flex;
      justify-content: center;
      height: 500px;
      gap: 10px;
      flex-wrap: wrap;
    }

    .container > div {
      flex: 0 0 120px;
      transition: 0.5s ease-in-out;
      cursor: pointer;
      position: relative;
      overflow: hidden;
      border-radius: 20px;
    }

    .container > div:nth-of-type(1) {
      background: url("https://images.pexels.com/photos/17179705/pexels-photo-17179705.jpeg?auto=compress&cs=tinysrgb&w=600")
        no-repeat 50% / cover;
    }

    .container > div:nth-of-type(2) {
      background: url("https://images.pexels.com/photos/14344696/pexels-photo-14344696.jpeg?auto=compress&cs=tinysrgb&w=600")
        no-repeat 50% / cover;
    }

    .container > div:nth-of-type(3) {
      background: url("https://images.pexels.com/photos/17179699/pexels-photo-17179699.jpeg?auto=compress&cs=tinysrgb&w=600")
        no-repeat 50% / cover;
    }

    .container > div:nth-of-type(4) {
      background: url("https://images.pexels.com/photos/14344661/pexels-photo-14344661.jpeg?auto=compress&cs=tinysrgb&w=600")
        no-repeat 50% / cover;
    }

    .container > div:nth-of-type(5) {
      background: url("https://images.pexels.com/photos/14448341/pexels-photo-14448341.jpeg?auto=compress&cs=tinysrgb&w=600")
        no-repeat 50% / cover;
    }

    .container > div:nth-of-type(6) {
      background: url("https://images.pexels.com/photos/14344694/pexels-photo-14344694.jpeg?auto=compress&cs=tinysrgb&w=600")
        no-repeat 50% / cover;
    }

    .content {
      font-size: 10px;
      color: #fff;
      display: flex;
      align-items: center;
      padding: 15px;
      opacity: 0;
      flex-direction: column;
      height: 100%;
      justify-content: flex-end;
      background: linear-gradient(
        0deg,
        #ffffff00 0%,
        #ffffff00 100%
      );
      transform: translatey(100%);
      transition: opacity 0.5s ease-in-out, transform 0.5s 0.2s;
      visibility: hidden;
      border-radius: 30px;
    }

    .content h2 {
      font-family: "Square721BTRoman", sans-serif;
      text-decoration: none;
      text-transform: uppercase;
    }

    .content span {
      display: block;
      margin-top: 5px;
      font-size: 15px;
      font-family: "Satoshi-Medium", sans-serif;
      background-color: #0054FF;
      padding: 5px 10px;
      border-radius: 5px;
    }

    .container > div:hover {
      flex: 0 0 250px;
      transform: translatey(-30px);
      border-radius: 40px;
    }

    .container > div:hover .content {
      opacity: 1;
      transform: translatey(0%);
      visibility: visible;
      border-radius: 40px;
    }
  </style>
</head>
<body>
  <div class="container">
    <div>
      <div class="content">
        <h2>Jean Dupont</h2>
        <span>Photographe</span>
      </div>
    </div>
    <div>
      <div class="content">
        <h2>Marie Lambert</h2>
        <span>Designer Graphique</span>
      </div>
    </div>
    <div>
      <div class="content">
        <h2>Paul Martin</h2>
        <span>Développeur Web</span>
      </div>
    </div>
    <div>
      <div class="content">
        <h2>Sophie Leroy</h2>
        <span>Chef de Projet</span>
      </div>
    </div>
    <div>
      <div class="content">
        <h2>Thomas Moreau</h2>
        <span>Consultant SEO</span>
      </div>
    </div>
    <div>
      <div class="content">
        <h2>Laura Petit</h2>
        <span>Community Manager</span>
      </div>
    </div>
  </div>
</body>
</html>
downloadDownload PNG downloadDownload JPEG downloadDownload SVG

Tip: You can change the style, width & colours of the snippet with the inspect tool before clicking Download!

Click to optimize width for Twitter