html - How do I add animated text on these images when I hover my cursor without changing current style?

Question

.gallery {
  display: grid;
  grid-gap: 20px;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}

.gallery img {
  width: 100%;
}

.gallery h2 {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  grid-gap: 20px;
  align-items: center;
}

.gallery h2:before,
.gallery h2:after {
  display: block;
  content: '';
  height: 10px;
  background: linear-gradient(to var(--direction, left), var(--yellow), transparent);
}

.gallery h2:after {
  --direction: right;
}

<section class="gallery">
  <h2>Instant Grams</h2>
  <img src="https://source.unsplash.com/random/201x201" alt="">
  <img src="https://source.unsplash.com/random/202x202" alt="">
  <img src="https://source.unsplash.com/random/203x203" alt="">
  <img src="https://source.unsplash.com/random/204x204" alt="">
</section>

Answer 1

You could make the color transparent and when hovering with color. Here is an example:

* {
  margin: 0;
  padding: 0;
}

p {
  height: 300px;
  width: 300px;
  color: transparent;
  transition: all 1s;
}

p:hover {
  color: #000;
  background: #00d5ff;
}

<h3>Hover below</h3>

<p>Hello</p>