当我悬停光标而不更改当前样式时，如何在这些图像上添加动画文本

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>