<html>   
   <body>
<div class="example">
        <img src="https://images.unsplash.com/photo-1643678063167-1916c49968e6?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=387&q=80">
      <div class="exampleInfo">
        <div class="info1">
            <h4>The Florida Keys</h4>
          <p>Plane arriving at May 15th, 6am</p>
        </div>
      </div>
    </div>
     </body>
     </html>
@import url('https://fonts.googleapis.com/css2?family=Dancing+Script&family=Inter&family=Lobster&family=Lora:ital@0;1&family=Mulish&family=Poiret+One&family=Poppins:wght@300;400&family=Red+Hat+Display:wght@300;400&family=Source+Sans+Pro&family=Tilt+Neon&family=Unbounded&display=swap');

html, body {
  width: 100%;
  height: 100%
}

body {
  display: flex;
  align-items: center;
  justify-content: center;
}

.example {
    width: 187px;
    height: 347px;
    border-radius: 10px;
  font-family: Poppins;
}

.example > img {
    width: inherit;
    height: inherit;
    object-fit: cover;
    position: absolute;
    border-radius: inherit;
}


.exampleInfo {
    color: white;
    width: inherit;
    height: inherit;
    position: relative;
    border-radius: inherit;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0) 14.06%, #1E1E1E 100%);
  display: flex;
  align-items: flex-end;
  text-align: center;
  font-size: 20px
}


.info1 > h4 {
  display: flex;
  align-items: center;
  justify-content: center;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.