How Do I Add Animated Text On These Images When I Hover My Cursor Without Changing Current Style?

I would like to show hello message to user when he hovers on any of these images. I tried online solutions but it changes my component style. I would like to keep my current style

Solution 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>

You can also do it with images! To do this, you need to position the text over the image, making it transparent. Then you have to give it a color with a hover effect. For a nicer effect you can make the image darker when hovering over it.

Here's another example:

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

.galleryh2 {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  grid-gap: 20px;
  align-items: center;
}
.galleryh2:before,
.galleryh2:after {
  display: block;
  content: '';
  height: 10px;
  background: linear-gradient(to var(--direction, left), var(--yellow), transparent);
}

.galleryh2:after {
  --direction: right;
}

/* Image Boxes */.gallery-item {
  position: relative;
  color: transparent;
  transition: all .5s;
  margin: 0;
  padding: 0;
  width: 100%;
}

.gallery-item:hover {
  color: #fff;
  filter: brightness(90%);
  cursor: pointer;
}

.text {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

img {
  width: 100%;
}

<sectionclass="gallery"><h2>Instant Grams</h2><divclass="gallery-item"><imgsrc="https://source.unsplash.com/random/200x200"alt=""><divclass="text">Some text...</div></div><divclass="gallery-item"><imgsrc="https://source.unsplash.com/random/201x201"alt=""><divclass="text">Some text...</div></div><divclass="gallery-item"><imgsrc="https://source.unsplash.com/random/202x202"alt=""><divclass="text">Some text...</div></div><divclass="gallery-item"><imgsrc="https://source.unsplash.com/random/203x203"alt=""><divclass="text">Some text...</div></div></section>

Solution 2:

Do you mean this?

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

.galleryimg {
  width: 100%;
}

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

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

.galleryh2:after {
  --direction: right;
}
.gallery-item {
  position: relative;
}
.gallery-item:hover {
  cursor: pointer;
}
.greeting {
  position: absolute;
  top: 50%;
  left: 50%;
  white-space: nowrap;
  transform: translate(-50%, -50%);
  color: red;
  font-weight: bold;
  font-size: 30px;
  opacity: 0;
  transition: opacity .5s;
}
.gallery-item:hover.greeting {
  opacity: 1;
}

<sectionclass="gallery"><h2>Instant Grams</h2><divclass="gallery-item"><imgsrc="https://source.unsplash.com/random/201x201"alt=""><divclass="greeting">Hello 1</div></div><divclass="gallery-item"><imgsrc="https://source.unsplash.com/random/202x202"alt=""><divclass="greeting">Hello 2</div></div><divclass="gallery-item"><imgsrc="https://source.unsplash.com/random/203x203"alt=""><divclass="greeting">Hello 3</div></div><divclass="gallery-item"><imgsrc="https://source.unsplash.com/random/204x204"alt=""><divclass="greeting">Hello 4</div></div></section>