Tarjeta expansible en hover (CSS)

Explora un diseño interactivo de tarjetas CSS que se expanden al pasar el cursor sobre ellas, creando un efecto dinámico y atractivo. Ideal para destacar contenido de manera elegante y mantener la atención del usuario, estas tarjetas flexibles son perfectas para presentar información de manera organizada.

<style>
  .wrapper {
    display: flex;
    width: 100%;
    height: 400px;
    border-radius: 15px;
    overflow: hidden;
  }

  .card {
    flex: 1;
    height: 100%;
    transition: flex 0.5s ease;
    cursor: pointer;
    padding: 20px;
  }

  .card:hover {
    flex: 10;
  }

  .card1 {
    background-color: #D7AD3B;
  }

  .card2 {
    background-color: #7D142F;
  }

  .card3 {
    background-color: #76B7C5;
  }

  .card4 {
    background-color: #2F646F;
  }
</style>

<section>
  <div class="wrapper">
    <div class="card card1">
      <h2>Lorem Ipsum 1</h2>
      <p>Mauris quis magna purus. Aenean fringilla massa ac felis ornare, a molestie ligula suscipit. Donec sed velit id sem mattis sagittis vel ut nisi. Pellentesque in orci luctus, blandit libero fermentum, accumsan dui. Nam dignissim volutpat magna id faucibus. Nam sodales semper tempus. Vivamus risus nisi, auctor at euismod vitae, tempor sit amet risus.</p>
    </div>
    <div class="card card2">
      <h2>Lorem Ipsum 2</h2>
      <p>Mauris quis magna purus. Aenean fringilla massa ac felis ornare, a molestie ligula suscipit. Donec sed velit id sem mattis sagittis vel ut nisi. Pellentesque in orci luctus, blandit libero fermentum, accumsan dui. Nam dignissim volutpat magna id faucibus. Nam sodales semper tempus. Vivamus risus nisi, auctor at euismod vitae, tempor sit amet risus.</p>
    </div>
    <div class="card card3">
      <h2>Lorem Ipsum 3</h2>
      <p>Mauris quis magna purus. Aenean fringilla massa ac felis ornare, a molestie ligula suscipit. Donec sed velit id sem mattis sagittis vel ut nisi. Pellentesque in orci luctus, blandit libero fermentum, accumsan dui. Nam dignissim volutpat magna id faucibus. Nam sodales semper tempus. Vivamus risus nisi, auctor at euismod vitae, tempor sit amet risus.</p>
    </div>
    <div class="card card4">
      <h2>Lorem Ipsum 4</h2>
      <p>Mauris quis magna purus. Aenean fringilla massa ac felis ornare, a molestie ligula suscipit. Donec sed velit id sem mattis sagittis vel ut nisi. Pellentesque in orci luctus, blandit libero fermentum, accumsan dui. Nam dignissim volutpat magna id faucibus. Nam sodales semper tempus. Vivamus risus nisi, auctor at euismod vitae, tempor sit amet risus.</p>
    </div>
  </div>
</section>