当我将光标悬停在不更改当前样式的情况下,如何在这些图像上添加动画文本? [英] How do I add animated text on these images when I hover my cursor without changing current style?
问题描述
.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>
当用户将鼠标悬停在任何这些图像上时,我想向他们显示问候消息.我尝试了在线解决方案,但是它改变了我的组件样式.我希望保持当前样式与使用Grid布局相同,并且希望在用户将鼠标悬停在其上时添加动画文本.
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 styles same as I am using Grid layout, and I want to add animated text when user hovers on it.
推荐答案
您可以使颜色透明,也可以将颜色悬停在颜色上.这是一个示例:
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.
这是另一个例子:
/* 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>
这篇关于当我将光标悬停在不更改当前样式的情况下,如何在这些图像上添加动画文本?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!