我正在實現一個覆蓋我的圖像的文本。文本居中，但覆蓋超出了圖像的寬度。就限制覆蓋而言，我并不擔心我所忽略的內容。目前，主要趨勢文章的背景延伸到屏幕的整個寬度，而兩個趨勢文章的背景延伸到圖像的寬度之外一點。

img.rounded {
  border-radius: 5%; /* Use 50% to create a circular shape */
}

figure {
  position: relative;
  display: inline-block;
  overflow: hidden;
}

figcaption {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  padding: 5px;
  background-color: rgba(0, 0, 0, 0.7); /* Opaque background color */
  color: #fff;
  opacity: 0; /* Initially hidden */
  transition: opacity 0.3s ease-in-out;
  box-sizing: border-box;
  display: inline-block;
  justify-content: center;
}

figure:hover figcaption {
  opacity: 1; /* Show on hover */
}

<section id="trending">
  <h1>Trending News</h1>
  <!--Main trending article-->
  <figure>
    <a href = "article.html">
      <img src="./images/ja.jpg" alt="Trulli" style="width:50%" class = "rounded">
      <figcaption>Ja Suspended Again</figcaption>
    </a>
  </figure>
</section>
<section id="twoTrending">
  <figure>
    <a href = basketball.html>
      <img src="./images/bron.jpg" alt="Trulli" style="width: 80%" class="rounded">
      <figcaption>Lebron announces retirement.</figcaption>
    </a>
  </figure>
  <!--Second trending article-->
  <figure>
    <a href = "basketball.html">
      <img src="./images/bron.jpg" alt="Landscape" style="width: 80%" class="rounded">
      <figcaption>Another Lebron article.</figcaption>
    </a>
  </figure>
</section>