🧵Creating an animated background in text

To create a beautiful background for text, use the background-image property, which takes a value in the form of a photo, or a link to any photo or video via url()

• color: transparent — makes the text transparent. This is necessary so that the text is visible only due to the background image.

• -moz-background-clip and -webkit-background-clip are special properties for other browsers that limit the display of the background image to the text area only.

h1 {
  font-family: sans-serif;
  text-align: center;
  font-size: 80px;
  font-weight: 800;
  text-transform: uppercase;
  background-image: url(https://i.giphy.com/media/v1.Y2lkPTc5MGI3NjExYTlmN2h0MnhhNHFqcDFwaWYxMXd0NjlrZTE0NDBoY3N0M2hiNnY5ayZlcD12MV9pbnRlcm5hbF9naWZfYnlfaWQmY3Q9Zw/XQsEy59pNgaVu6QlGi/giphy-downsized-large.gif);
  background-size: cover;
  color: transparent;
  -moz-background-clip: text;
  -webkit-background-clip: text;
}

🤯 Do you know this GitHub hack?

1️⃣ Open any GitHub repository
2️⃣ Replace .com with .dev
3️⃣ View the repository code in a VS Code instance!

And yes, you can just press the "." button on your keyboard.

⭐️CSS Tip!⭐️

To create an inverted :hover effect, you can use mix-blend-mode with custom :hover properties.

button > span {
  left: calc(var(--x, 0) * 1px);
  top: calc(var(--y, 0) * 1px);
  mix-blend-mode: difference; 
}

The cool thing is that using mix-blend-mode acts as a color inverter, which works well with monochrome controls.

As for how to move this code to JavaScript?

const UPDATE = ({target, x, y }) => {
  const bounds = target.getBoundingClientRect()
  target .style.setProperty('--x', x - bounds.left)
  target .style.setProperty('--y', y - bounds .top)
}

const BTNS = document.querySelectorAll('button')
BTNS.forEach(BTN => BTN.addEventListener('pointermove', UPDATE))

button:is(:hover, :focus-visible) {
  --active: 1;
}
button span {
  transform: translate(-50%, -50%) scale(calc(var(--active, 0) * 3);
  transition: transform 0.25s;
}

💡 How to Easily Create an Accordion Without JavaScript: A Note for Front-End Developers

🖥 pop() method:

🌟 This method removes the last element of an array and returns the removed element.

Icons hover animation [Glassmorphism]👇

https://codepen.io/OfigenusMaximus/pen/xxQgxvE

🔰 CSS for JavaScript Developers