jquery - 在悬停时叠加图像？

Question

在悬停时使用 img 创建叠加层的最佳方法是什么？我在元素中使用框架基础。我试过这段代码，但效果不是很好:

这是我的代码:http://jsfiddle.net/fLsu5jzk/

<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>

.other_services {
    font-size: 14px;
    font-family: 'Open Sans', sans-serif;
}
.other_services img {
    max-height: 117px;
    max-width:200px;
}
.image-box {
    position:relative;

}
.image-box img {
    width:100%;
    vertical-align:top;
}
.image-box:after {
    content:'\A';
    position:absolute;
    width:24%; height:100%;
    top:0; left:0;
    background:rgba(0,0,0,0.6);
    opacity:0;
    transition: all 0.5s;
    -webkit-transition: all 0.5s;
}
.image-box:hover:after {
    opacity:1;
}
.image-box:hover + .icon-hidden{
    display: block;
}
.other_services .icon-hidden {
    position: absolute;
    z-index: 200;
    max-width: 133px;
    margin: -40% 0 0 24%;
    display: none;
}

有什么想法吗？

Answer 1

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

我还制作了一个基于 flexbox 属性的 centered 类来水平和垂直对齐文本和图标。

我还 object-fit: cover; 这确保它始终按比例显示图像。我敢肯定，如果您像这样使用它，它会完美运行!

.other_services {
    font-size: 14px;
    font-family:'Open Sans', sans-serif;
    color:#fff;
}

.img-wrapper {
    position: relative;
}

    .img-wrapper > img {
        width: 100%;
        object-fit: cover;
    }

    .img-wrapper-overlay {
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        background-color: rgba(0,0,0,0.6);
        transition: all 0.5s;
        -webkit-transition: all 0.5s;
        opacity: 0;
    }

    .img-wrapper:hover .img-wrapper-overlay {
        opacity: 1;
    }

.centered {
    display: -webkit-flex;
    display: flex;
    -webkit-flex-direction: column;
    flex-direction: column;
    -webkit-align-items: center;
    align-items: center;
    -webkit-justify-content: center;
    justify-content: center;
    text-align: center;
}

<div class="other_services">
    <div class="small-12 medium-3 large-3 columns">
        <div class="img-wrapper">
            <img src="http://s8.postimg.org/ithka8iv9/cleaning_of_shopping_centers.png">
            <div class="img-wrapper-overlay centered">
                <p>Some text</p>
                <img src="http://s22.postimg.org/u877u6rlp/icon_shop.png"/>
            </div>
        </div>
    </div>
</div>

在我的示例中，图像填充到页面的 100%，但是当添加到您已经基于基础的代码时，它会产生 33.3% 宽的图像(在桌面上)，这对你来说是完美的。