<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Responsive Flexbox Card Hover Effect</title>
<style>
 
</style>
</head>
<body>

<div class="flex-container">
  <div class="flex-item">
    <h2>Card 1</h2>
    <p>This is a card with a hover effect.</p>
  </div>
  <div class="flex-item">
    <h2>Card 2</h2>
    <p>Hover over this card for an effect.</p>
  </div>
  <div class="flex-item">
    <h2>Card 3</h2>
    <p>Another card with a hover effect.</p>
  </div>
</div>

</body>
</html>

 /* Default styles for all screen sizes */
  .flex-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 20px;
    padding: 20px;
  }

  .flex-item {
    flex: 1;
    max-width: 300px;
    padding: 20px;
    background-color: #fff;
    text-align: center;
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
  }

  /* Media query for screens smaller than 768px (tablets and mobiles) */
  @media screen and (max-width: 768px) {
    .flex-item {
      flex: 0 0 calc(50% - 20px); /* 2 items per row */
    }
  }

  /* Media query for screens smaller than 480px (mobiles) */
  @media screen and (max-width: 480px) {
    .flex-item {
      flex: 1 0 100%; /* 1 item per row, full width */
    }
  }

  /* Hover effect on flex items */
  .flex-item:hover {
    transform: translateY(-5px); /* Move item up on hover */
    box-shadow: 0 5px 10px rgba(0, 0, 0, 0.3); /* Add a shadow on hover */
  }

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.