<div class="container">
      <div class="card">
        <div class="card-item">
          <img src="https://lh3.googleusercontent.com/-h9Vw01ffbKY/YGnJU35eHBI/AAAAAAAACAE/FbXDvjOc5ZojyWTbxkR6zDqG3dTdCNimgCLcBGAsYHQ/1.jpg" alt="" />
          <div class="card-details">
            <h1>Card 1</h1>
            <p>Lorem ipsum dolor sit amet consectetur.</p>
          </div>
        </div>
        <div class="card-item">
          <img src="https://lh3.googleusercontent.com/-LXockBZNMv4/YGnJU84E1QI/AAAAAAAACAA/wLGSF1b9poMk6Mk-XtvkBK0TfK9n1iH7ACLcBGAsYHQ/2.jpg" alt="" />
          <div class="card-details">
            <h1>Card 2</h1>
            <p>Lorem ipsum dolor sit amet consectetur.</p>
          </div>
        </div>
        <div class="card-item">
          <img src="https://lh3.googleusercontent.com/-ETl5RnIakrw/YGnJU9vu2lI/AAAAAAAAB_8/835dhd1iImsj2gOZXnQ4reXpdp1fQlHUQCLcBGAsYHQ/3.jpg" alt="" />
          <div class="card-details">
            <h1>Card 3</h1>
            <p>Lorem ipsum dolor sit amet consectetur.</p>
          </div>
        </div>
        <div class="card-item">
          <img src="https://lh3.googleusercontent.com/-q2LZJIIwqUA/YGnJU3Gz9yI/AAAAAAAACAI/aBrT1HBsGOM4yCINuhgFNDU3f_8f024cgCLcBGAsYHQ/4.jpg" alt="" />
          <div class="card-details">
            <h1>Card 4</h1>
            <p>Lorem ipsum dolor sit amet consectetur.</p>
          </div>
        </div>
      </div>
    </div>
@import url("https://fonts.googleapis.com/css2?family=Ubuntu:wght@300;400;500;700&display=swap");

* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
  font-family: "Ubuntu", sans-serif;
}

.container {
  height: 100vh;
  width: 100%;
  background-color: #afeeed;
  display: flex;
  justify-content: center;
}
.card {
  grid-template-columns: 1fr 1fr;
  align-items: center;
  position: relative;
  display: grid;
  gap: 0 20px;
}

.card .card-item {
  position: relative;
}
.card img {
  height: 250px;
  width: 300px;
  transition: 0.4s ease-in-out all;
}

.card .card-details {
  position: absolute;
  padding: 10px 5px;
  bottom: 0px;
  opacity: 0;
  transition: 0.4s ease-in-out all;
}

.card-details h1 {
  font-size: 18px;
  margin: 2px 0;
}
.card-details p {
  font-size: 14px;
}
.card-item:hover .card-details {
  opacity: 1;
  bottom: 10px;
}

.card-item:hover img {
  transform: scale(1.05);
}

@media(max-width:600px){
  .card {
  grid-template-columns: 1fr;  gap: 0 10px;
}
  .container {
    height: 210vh;}
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.