当我将光标悬停在不改变当前样式的情况下时，如何在这些图像上添加动画文本？

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

您可以使颜色透明并且悬停在颜色上。这是一个例子：

* {
  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>

你也可以用图片来做！为此，您需要将文本放置在图像上，使其透明。然后你必须给它一个带有悬停效果的颜色。为了获得更好的效果，您可以将鼠标悬停在图像上时使图像变暗。

这是另一个例子：

/* Gallery */

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

.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;
}

/* 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%;
}

<section class="gallery">

<h2>Instant Grams</h2>

<div class="gallery-item">
  <img src="https://source.unsplash.com/random/200x200" alt="">
  <div class="text">Some text...</div>
</div>

<div class="gallery-item">
  <img src="https://source.unsplash.com/random/201x201" alt="">
  <div class="text">Some text...</div>
</div>

<div class="gallery-item">
  <img src="https://source.unsplash.com/random/202x202" alt="">
  <div class="text">Some text...</div>
</div>

<div class="gallery-item">
  <img src="https://source.unsplash.com/random/203x203" alt="">
  <div class="text">Some text...</div>
</div>
</section>

Answer 2

你是这个意思吗？

.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;
}
.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;
}

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

当我将光标悬停在不改变当前样式的情况下时，如何在这些图像上添加动画文本？

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

html

css

css-transitions

html5-canvas