Fuzzed Text (with tooltip)

Small example of making text blurry.

by Andrew Holloway

HTML

<p>
This is an example of some <span class="ft">fuzzed text<span class="tooltip">fuzzed text</span></span> with content on both sides.
</p>

CSS

.ft {
  position: relative;
  color: transparent;
  text-shadow: 0 0 10px #000000aa;
}

.tooltip {
  display: none;
  position: absolute;
  border: 1px solid grey;
  min-width: 100px;
  text-shadow: none;
  color: black;
  text-align: center;
  padding: 5px;
    
  background-color: #acf;
  left: 50%;
  bottom: calc(50% + 20px);
  transform: translate(-50%);
}

p {
  padding: 3rem;
  padding-top: 10rem;
  height: 50rem;
  border: 1px solid black;
}

.ft:hover .tooltip {
  display: block;
}