Jquery 在悬停状态下覆盖img？

悬停时使用

img

创建覆盖的最佳方法是什么？我在项目中使用了框架基础。我尝试过此代码，但效果不太好：

这是我的密码：

有什么想法吗

“最佳方式”是基于意见的。看，我不知道这是否是最好的方式，但这肯定是一个伟大的方式

我还基于

flexbox

属性创建了一个

centered

类，用于水平和垂直对齐文本和图标

我还

对象匹配：封面这确保它始终按比例显示图像。我敢肯定，如果你像这样使用它，它会工作得很好


。其他\u服务{
字体大小：14px；
字体系列：'opensans'，Sans serif；
颜色：#fff；
}
.img包装{
位置：相对位置；
}
.img包装器>img{
宽度：100%；
对象匹配：覆盖；
}
.img包装覆盖层{
位置：绝对位置；
排名：0；
底部：0；
左：0；
右：0；
背景色：rgba（0,0,0,0.6）；
过渡：均为0.5s；
-webkit过渡：所有0.5s；
不透明度：0；
}
.img包装：hover.img包装覆盖{
不透明度：1；
}
.居中{
显示：-webkit flex；
显示器：flex；
-webkit柔性方向：列；
弯曲方向：立柱；
-webkit对齐项目：居中；
对齐项目：居中；
-webkit内容：中心；
证明内容：中心；
文本对齐：居中；
}

一些文本

“最佳方式”问题是以观点为基础的，因此与so无关。寻求类似这样的问题PS：这不是最佳方式；）是的）这绝对是非常好的方式）谢谢你的帮助
<div class="other_services">
    <div class="small-12 medium-3 large-3 columns">
        <div class="image-box">
            <img src="http://s8.postimg.org/ithka8iv9/cleaning_of_shopping_centers.png" alt="">
        </div>
        <div>some text here</div>
        <img src="http://s22.postimg.org/u877u6rlp/icon_shop.png" alt="" class="icon-hidden">
    </div>
</div>