<figure class="container">
      <img src="04eadd2b-7dd4-43fc-af3d-cff948811986_balloons.jpg.webp" alt="balloons">
      <figcaption>Balloons</figcaption>
    </figure>

/* Copyright 2018 Google LLC.
SPDX-License-Identifier: Apache-2.0 */

/* CSS files add styling rules to your content */

body {
  font-family: "Benton Sans", "Helvetica Neue", helvetica, arial, sans-serif;
  margin: 2em;
}

img {
  max-width: 100%;
  display: block;
}

.container {
  max-width: 400px;
  hight: 300px;
  margin: 1em auto;
  position: relative;
  border:1px solid #ccc;
  
}

.container img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  -webkit-mask-image: radial-gradient(circle at 80% 70%, rgba(255,255,255,.1) 0%, rgba(0,0,0,1) 40%);
  mask-image: radial-gradient(circle at 80% 70%, rgba(255,255,255,.1) 0%, rgba(0,0,0,1) 40%);
  -webkit-mask-size: 400px 300px;
} 

.container figcaption {
  position: absolute;
  bottom: 1em;
  right: 1em;
  font-size: 150%;
  color: #333;
}