悬停时如何更改不透明度和显示标题？

Question

我想让图像的不透明度变暗，并在图像的中心显示一个白色的标题。我一直在尝试一些建议，但没有用。这是代码：

例子：

section {
  width: 90%;
  margin: 50px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
}

section img {
  width: 30%;
  margin: calc(10%/6);
}

.album {
  text-transform: uppercase;
  border-bottom: 2px solid #F1F1F1;
  width: 60%;
  margin-left: 50px;
  padding: 1.1em 0;
  letter-spacing: 2px;
  font-family: 'Raleway', sans-serif;
  font-size: 1.5em;
  margin-top: 100px;
}

p {
  font-family: 'Montserrat', sans-serif;
  margin-left: 50px;
  font-size: 0.9em;
}

<h1 class="album"> &#47 projects</h1>
<p>a brief summary of my work</p>

<section>
  <img src="https://images.unsplash.com/photo-1553324069-10552f926791?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxzZWFyY2h8MTR8fGRhcmslMjBncmVlbiUyMG5hdHVyZXxlbnwwfDF8MHx8&auto=format&fit=crop&w=500&q=60" href="nature.html"> <img src="https://images.pexels.com/photos/5273637/pexels-photo-5273637.jpeg?auto=compress&cs=tinysrgb&w=600"
    href="architecture.html">
  <img src="https://images.unsplash.com/photo-1502210600188-51a3adffa4aa?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=334&q=80" href="ocean.html">
  <img src="https://images.unsplash.com/photo-1676385488690-81bc3462c9f2?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxzZWFyY2h8MTM0fHxiZWFjaCUyMHdhdmVzfGVufDB8MXwwfHw%3D&auto=format&fit=crop&w=500&q=60" href="clouds.html">
  <img src="https://images.unsplash.com/photo-1511207538754-e8555f2bc187?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxzZWFyY2h8OHx8Zm9yZXN0fGVufDB8MXwwfHw%3D&auto=format&fit=crop&w=500&q=60" href="nature.html">
  <img src="https://images.unsplash.com/photo-1597738755960-aeab75744b5e?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxzZWFyY2h8MzV8fGFyY2hpdGVjdHVyZXxlbnwwfDF8MHx8&auto=format&fit=crop&w=500&q=60" href="nature.html">
</section>

谁能帮帮我