How do i make text with pixelated overlay (html/css)?-CodePudding

I have a h1 tag which I initially want to have an pixelated overlay, something like this

and when i over on it, I want it to fade-transition to make the actual text visible.

Does anyone know how I can achieve this with html and css?

I've tried with text-shadow css property, but that only makes it blurry, not pixelated.

CodePudding user response：

I don't think text pixelating is possible with CSS. The closest I've got are these:

  h1{
    position: relative;
    text-transform: uppercase;
  }
  h1::after{
    position: absolute;
    left: 0;
    bottom: 0;
    content: '';
    width: 480px;
    height: 40px;
    background: url('https://img.freepik.com/free-vector/grey-pixelated-pattern_1053-169.jpg') no-repeat;
    transition: all .2s ease-in;
  }
  h1:hover::after{width: 0;}

<h1>Never gonna give you up</h1>

This one with background clip:

h1{
  font-size: 50px;
  text-transform: uppercase;
  width: max-width;
  background: url('https://img.freepik.com/free-vector/grey-pixelated-pattern_1053-169.jpg');
  background-repeat: no-repeat;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  }
  h1:hover{
  -webkit-text-fill-color: unset;
  background: none;
  }

<h1>Never gonna give you up</h1>

CodePudding user response：

You will only want to transition the properties concerned, because all can cause the trainsition to fail when some property cannot be animated.

Added a delay variation in the snippet affecting width and opacity only.

h1 {
    position: relative;
    text-transform: uppercase;
}

h1::after {
    position: absolute;
    left: 0;
    bottom: 0;
    content: "";
    height: 40px;

    background: url("https://img.freepik.com/free-vector/grey-pixelated-pattern_1053-169.jpg") no-repeat;

    width: 480px; opacity: 1;
    transition: width 0.5s ease-in, opacity 1s ease-in;
}

h1:hover::after {
    width: 0; opacity: 0;
    transition: width 1s ease-in, opacity 0.5s ease-in;
}

<h1>Never gonna give you up</h1>