How do I display text on top of another text (blurred, any length)?

Question

I'm currently working on a chat interface. My task is now to render text on top of another text. The underlying text - the original message - is blurred and has a dynamic length.

Here's what I've come up with, but I get this additional vertical offset that shifts the content out of the desired position, especially when the text is short.

Note that I already tried approaches discussed here: Displaying text on top of text, Text on top of blurred Image, Center text on top of another text

Can anyone help here please?

.bubble {
  margin-block: 1.5rem;
  padding-inline: 0.35rem;
  padding-block: 0.25rem;
  border-radius: 5px;
  position: relative;
  width: fit-content;
  max-width: 25rem;
  background-color: rgb(246 246 246);
  box-shadow: 0 0, 0 0, 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
}

.blurred {
  filter: blur(3px) opacity(0.3);
}

.text-overlay {
  position: absolute;
  top: 50%;
  width: 100%;
  height: 100%;
  text-align: center;
}

<!-- original short text -->

<div class="bubble">
  <span>
  Lorem ipsum dolor sit amet.
  </span>
</div>


<!-- blurred short text -->

<div class="bubble">
  <span class="blurred">
  Lorem ipsum dolor sit amet.
  </span>
  <div class="text-overlay">
    <small>hidden content</small>
  </div>
</div>

<!-- original long text -->

<div class="bubble">
  <span>
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec molestie risus ac faucibus rutrum. Proin eu lacus sed lorem dictum ornare. Vivamus dictum nibh sed arcu varius, nec laoreet mi convallis. Sed in leo felis. Vestibulum ornare venenatis ex, ac tristique leo vehicula sit amet.
  </span>
</div>


<!-- blurred long text -->
<div class="bubble">
  <span class="blurred">
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec molestie risus ac faucibus rutrum. Proin eu lacus sed lorem dictum ornare. Vivamus dictum nibh sed arcu varius, nec laoreet mi convallis. Sed in leo felis. Vestibulum ornare venenatis ex, ac tristique leo vehicula sit amet.
  </span>
  <div class="text-overlay">
    <small>hidden content</small>
  </div>
</div>

score 0 · Accepted Answer · answered Mar 23 '23 at 09:36

The reason for the vertical offset of your overlaying text is the parent's padding box - read more on this topic here: Absolute positioning ignoring padding of parent

For such positioning tasks I often prefer working with grid layouts. With only few changes in your code (in the .text-overlay class) it now renders the text centered as you'd expect. And most importantly, it works for any text length.

.bubble {
  margin-block: 1.5rem;
  padding-inline: 0.35rem;
  padding-block: 0.25rem;
  border-radius: 5px;
  position: relative;
  width: fit-content;
  max-width: 25rem;
  background-color: rgb(246 246 246);
  box-shadow: 0 0, 0 0, 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
}

.blurred {
  filter: blur(3px) opacity(0.3);
}

.text-overlay {
  position: absolute;
  top: 0;
  display: grid;
  width: 100%;
  height: 100%;
  align-content: center;
  text-align: center;
}

<!-- original short text -->

<div class="bubble">
  <span>
  Lorem ipsum dolor sit amet.
  </span>
</div>


<!-- blurred short text -->

<div class="bubble">
  <span class="blurred">
  Lorem ipsum dolor sit amet.
  </span>
  <div class="text-overlay">
    <small>hidden content</small>
  </div>
</div>

<!-- original long text -->

<div class="bubble">
  <span>
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec molestie risus ac faucibus rutrum. Proin eu lacus sed lorem dictum ornare. Vivamus dictum nibh sed arcu varius, nec laoreet mi convallis. Sed in leo felis. Vestibulum ornare venenatis ex, ac tristique leo vehicula sit amet.
  </span>
</div>


<!-- blurred long text -->
<div class="bubble">
  <span class="blurred">
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec molestie risus ac faucibus rutrum. Proin eu lacus sed lorem dictum ornare. Vivamus dictum nibh sed arcu varius, nec laoreet mi convallis. Sed in leo felis. Vestibulum ornare venenatis ex, ac tristique leo vehicula sit amet.
  </span>
  <div class="text-overlay">
    <small>hidden content</small>
  </div>
</div>

How do I display text on top of another text (blurred, any length)?

1 Answers1