Question

在悬停时使用img创建叠加层的最佳方法是什么？我在项目中使用框架基础。我已经尝试过这段代码，但它并没有很好地运作：

<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

＆＃34;最好的方式＆＃34;以意见为基础。看，我不知道这是否是最好的方式，但这肯定是一个很好的方式！

我还根据centered属性创建了一个flexbox类，以水平和垂直对齐文本和图标。

我也object-fit: cover;这确保它始终按比例显示图像。我非常确定如果您像这样使用它，它会完美运作！

＆＃13;

.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;
}

＆＃13;

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

＆＃13;

在我的示例中，图片被填充到页面的100%，但是当添加到已经基于基础的代码时，它将生成33.3%宽图像（在桌面上），这将是在你的情况下完美。

在悬停时用img叠加？

1 个答案: