Emoji and Animation and Overlay (saveable to SVG image via right hand cell click) below ...

Hello

Text Background Clip

RJM Programming - May, 2022

Thanks to Emoji + background-clip:text

Words

CSS

#box:after {
  content: attr(data-hover);
}

#bbox:after {
  content: attr(data-hover);
}
 
div {
  display: inline-block;
  font-size: 128px;
  line-height: 1.2;
  text-align: center;
  
  background: url(https://picsum.photos/1000/1000?image=580) center center no-repeat;
  background-size: cover;
  background-clip: text;
  -webkit-background-clip: text;
  
  
  color: rgba(255,0,0,0.6);

span { color: transparent; }
}

h1 {
  -webkit-animation: fadebutton 4s ease-out infinite;
  -moz-animation: fadebutton 4s ease-out infinite;
  animation: fadebutton 4s ease-out infinite;
}

@keyframes fadebutton { /* Thanks to https://ide.geeksforgeeks.org/online-html-editor/4f0ce33b-a6e5-463e-8398-9500b4752d90 */
  from {
    margin-left: 0px;
  }

to {
    margin-left: 30px;
  }
}

.box {
  -webkit-animation: frotate 16s ease-out infinite;
  -moz-animation: frotate 16s ease-out infinite;
  animation: frotate 16s ease-out infinite;
}

@keyframes frotate { /* Thanks to https://ide.geeksforgeeks.org/online-html-editor/4f0ce33b-a6e5-463e-8398-9500b4752d90 */
  from {
    transform: rotate(0deg);
    margin-left: 0px;
  }

to {
    transform: rotate(90deg);
    margin-left: 130px;
  }
}

@keyframes fadebutton { /* Thanks to https://ide.geeksforgeeks.org/online-html-editor/4f0ce33b-a6e5-463e-8398-9500b4752d90 */
  from {
    margin-left: 0px;
  }

to {
    margin-left: 130px;
  }
}
   
html { height: 100%; display: flex; }
/* body { 
  margin: auto; 
  max-width: 300px;
  text-align: center; 
} */
</style>

Hello