在图像上添加悬停效果（更好的做法） CSS答案

【问题标题】：add a hover effect over an image (better practices) CSS在图像上添加悬停效果（更好的做法） CSS
【发布时间】：2017-04-17 23:06:09
【问题描述】：

我有 2 张图片：

我希望当光标在图像上方时，它会出现在图像上，类似于我附加的图像：

实现它的最佳方法是什么？可以通过 :before 实现吗？

https://jsfiddle.net/149p9wnm/

div.image1 {
 position:relative;
 background: url('http://kingofwallpapers.com/imagem/imagem-005.jpg') no-
 repeat scroll left top transparent;
 width: 232px;
 height: 200px;
}

div.image2 {
 position:relative;
 background: url('http://kingofwallpapers.com/imagem/imagem-006.jpg') no-
 repeat scroll left top transparent;
 width: 232px;
 height: 200px;
}

【问题讨论】：

请尝试一下。你几乎在那里。要问一个好问题，你应该展示你的尝试以及为什么它们没有奏效。现在看来您没有为此付出任何努力，您希望我们解决问题。告诉我们你已经研究过它，然后你遇到了障碍。
标题为“更好的做法”，我希望您展示您对多个解决方案的尝试，并展示两种解决方案的优缺点......但您的尝试次数为零。
尝试为每张图片输入这些 img 名称/描述（但设置为 disaply: none 作为默认值，因此您首先将它们隐藏），然后为 img 添加 css hover 以显示这些内容（名称/描述)
@amflare 好的，等我..
Display an image while hover on a text的可能重复

标签： html css

【解决方案1】：

    <div class="yourclass">

    <p>Your text</p>

    <img src="yourimage" alt="">
   </div>


    .yourclass{
    width: 250px;
    height: 250px;
    position: relative;
    overflow: hidden;
    }
    .yourclass:hover p{
    display: block;
}
    img{
    width: 100%;
    height: auto;
    position: absolute; 
    }
    p{
    display: none;
}

【讨论】：

我会把你作为最佳答案，但我想知道拥有 2 个或更多项目是如何工作的。
2 件或更多件是什么意思？喜欢两个不同的
标签？
请添加一些解释，说明此代码为何/如何帮助 OP。这将有助于为未来的观众提供一个可以学习的答案。请参阅this Meta question and its answers 了解更多信息。

【解决方案2】：

<style>
.overlay {
position: absolute;
top: 10px;
bottom: 10px;
left: 10px;
right: 10px;
height: 100%;
width: 100%;
opacity: 0;
background-color: black;
}
.div.image1:hover .overlay {
opacity: 0.8;
}
.text {
color: white;
font-size: 20px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
}
</style>
<div class="overlay">
<div class="text">hey</div>

【讨论】：

欢迎来到 Stack Overflow！请添加一些关于此代码为何/如何帮助 OP 的解释。这将有助于为未来的观众提供一个可以学习的答案。请参阅this Meta question and its answers 了解更多信息。