Question

我正在使用基础框架，它具有在网格中均匀分布缩略图的功能，我想使用具有放大镜图标的div，因此当您将鼠标悬停在div的背景上时，在图像上变得不透明，这可以在许多投资组合网站中看到，比如这个： www.procreate.com

HTML：

<li>  
    <div class="overlay">
        <h3>Sliders</h3>
        <a href="http://localhost:8888/wordpress/?p=43"><i class="fa fa-circle-plus"></i></a> 
    </div>
    <img src="http://localhost:8888/wordpress/wp-content/uploads/2014/01/sliders_290X290@2x.png" alt="sliders_290X290@2x" height="290" width="290">
</li>

CSS：

.overlay {
    background: #000;
    display: inline-block;
    max-height:100%;
    opacity: 0.1;
    position:relative;
    transition: all 1s ease 0s;
    width:100%;
    cursor:pointer;
}

.overlay:hover {
    opacity: 0.7;
}

.overlay i {
    color: #FFFFFF;
    left: 45%;
    position: absolute;
    top: 45%;
}

.overlay h3 {
    color: #FFFFFF;
    left: 100%;
    position: relative;
    transition: all 1s cubic-bezier(0, 1, 1, 1);
    font-size: 1.75rem;
    opacity: 0;
}

overlay:hover h3 {
    transform: translateX(-95%) scale(0.62);
    opacity: 1.0;
}

如果我将叠加div设置为绝对位置，它不适合容器，一切都显示错误，我该怎么做？谢谢你们。

对缩略图基础框架的叠加效果

0 个答案: