The css property box-shadow is not optimal in all situations. For example, when creating a speach bubble, a box shadow will only apply to the box, not the arrow.

To make both the box and the arrow have the same shadow you can use:

filter: drop-shadow(.1rem .1rem .1rem rgba(0,0,0,.5));

The trick is to place a ::before element with a gradient above the bottom text.

To be able to select the text below the overlay you can use pointer-events: none;.

In the demo below I use mix-blend-mode: multiple;.

HTML

<figure>
  <img src="https://csspoo.com/images/s.jpg">
</figure>

CSS

figure {
  background-color: #888;
  width: 150px;
  display: flex;
}

img {
  mix-blend-mode: multiply;
  width: 100%;
}

img:hover {
  mix-blend-mode: normal;
}

For this to be short and sweet, grid is used.

HTML

<h2>A headline</h2>

CSS

h2 {
    display: grid;
    width: 100%;
    align-items: center;
    text-align: center;
    grid-template-columns: minmax(1rem, 1fr) auto minmax(1rem, 1fr);
    grid-gap: 1rem;
    color: #333;
}

h2:before,
h2:after {
    content: '';
    height: 2px;
}

h2:before {
  background-image: linear-gradient(to right, #fff 0%, #aaa 100%);
}

h2:after {
  background-image: linear-gradient(to left, #fff 0%, #aaa 100%);
}

As you can see the "Hidden" text is not hidden.

HTML

<div style="display: none;">
  Hidden
</div>

CSS

[style*="display: none;"] {
  display: block !important;
}