悬停时如何在图像上应用文本?

Question

我想在将鼠标悬停在每张图片上应用图像上的文本，而不会弄乱元素容器。

我已经尝试过这个和类似的解决方案，但它对我不起作用。

这就是我所拥有的。

/*CSS*/
.item {
display: inline-block;
}
img {
padding-right: 10px;
}
.kulso {
text-align: center;
padding-top: 20px;
}
.kulso2 {
text-align: center;
}

<!--HTML-->
<div class="kulso">
<div class="item">
<img src="./img/long_macchiato.jpg" width="300px" height="200px" />
<p>Long Macchiato</p>
</div>
<div class="item">
<img src="./img/longblack.jpg" width="300px" height="200px" />
<p>Long Black</p>
</div>
<div class="item">
<img src="./img/café latte.jpg" width="300px" height="200px" />
<p>Café Latte</p>
</div>
<div class="item">
<img src="./img/ristretto.jpg" width="300px" height="200px" />
<p>Ristretto</p>
</div>
</div>
<div class="kulso2">
<div class="item">
<img src="./img/Cappuccino.jpg" width="300px" height="200px" />
<p>Capuccino</p>
</div>
<div class="item">
<img src="./img/flat-white.jpg" width="300px" height="200px" />
<p>Flat White</p>
</div>
<div class="item">
<img src="./img/mocha-coffee.jpg" width="300px" height="200px" />
<p>Mocha Coffee</p>
</div>
<div class="item">
<img src="./img/affogato.jpg" width="300px" height="200px" />
<p>Affogato</p>
</div>
</div>

演示站点： https://peaceful-carson-9d2ad7.netlify.com/products.html/

我明白我必须在每个图像和标题周围有一个包装器。我的问题是，无论我在尝试使用 THIS 悬停时将文本应用于图像时修改或添加什么属性，要么......

• "内联块"已关闭，图片不会彼此相邻
• 不透明度，过渡影响图片之间的填充
• 文本位于页面中心，而不是图片
• 图片的大小更改

我注意到添加<div class="text">This is the text that appears on hover in the center of the image</div>瞬间搞砸了一切。

请使用我上面分享的代码给我提示或解决方案！

Answer 1

您必须在每个图像和标题周围都有一个包装器，就像您链接到的示例一样。你可以稍微修改一下，因为css可能会更干净一些，但这是你可以做的基本事情。

.container {
padding-bottom: 20px;
}
.container__row {
display: flex;
}
img {
max-width: 100%;
display: inline-block;
padding-bottom: 10px;
}
/* For medium devices (e.g. tablets) */
@media (min-width: 420px) {
.image-container {
max-width: 48%;
}
}
/* For large devices (e.g. desktops) */
@media (min-width: 760px) {
.image-container {
max-width: 24%;
}
}
.egykispadding {
padding-top: 20px;
}
.image-container {
position: relative;
max-width: 400px;
}
.image-container__caption {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
display: flex;
align-items: center;
justify-content: center;
background-color: deepskyblue;
color: white;
font-size: 2rem;
opacity: 0;
visibility: hidden;
transition: opacity 140ms;
}
.image-container:hover .image-container__caption {
opacity: 1;
visibility: visible;
}

<div class="container">
<div class="container__row egykispadding">
<div class="image-container">
<img src="https://www.stickpng.com/assets/images/580b585b2edbce24c47b2c8c.png" width="400" height="200" />
<div class="image-container__caption">Image caption</div>
</div>
</div>
<div class="container__row">
<div class="image-container">
<img src="https://www.stickpng.com/assets/images/580b585b2edbce24c47b2c8c.png" width="400" height="200" />
<div class="image-container__caption">Image caption</div>
</div>
<div class="image-container">
<img src="https://www.stickpng.com/assets/images/580b585b2edbce24c47b2c8c.png" width="400" height="200" />
<div class="image-container__caption">Image caption</div>
</div>
</div>

Answer 2

你可以试试这个：

<div id='hover2change' style="background-image:url('a.png');width:50px;height:50px;">
<img src="b.png" style="position:absolute;top:0px;left:0px;width:50px;">
</div>
<style>
#hover2change:hover img {left:-100%;}
</style>