Question

我正在尝试使用Bootstrap 3为动态图库创建一个漂亮的图像悬停叠加层：

<div class="section">
    <div class="container">
        <div class="row">
            <div class="col-lg-4 col-md-4 col-sm-6">
                <a href="#">
                    <span class="overlay zoom"></span><img class="img-responsive img-home-portfolio" src="http://upload.wikimedia.org/wikipedia/commons/4/45/World_Wind_Globe_NASA_Timbuktu_1.jpg">
                </a>                  
            </div>                             
            <div class="col-lg-4 col-md-4 col-sm-6">
                <a href="#">
                    <span class="overlay zoom"></span><img class="img-responsive img-home-portfolio" src="http://upload.wikimedia.org/wikipedia/commons/4/45/World_Wind_Globe_NASA_Timbuktu_1.jpg">
                </a>
            </div>
            <div class="col-lg-4 col-md-4 col-sm-6">
                <a href="#">
                    <span class="overlay zoom"></span><img class="img-responsive img-home-portfolio" src="http://upload.wikimedia.org/wikipedia/commons/4/45/World_Wind_Globe_NASA_Timbuktu_1.jpg">
                </a>
            </div>
        </div>
        <!-- /.row -->
    </div>
    <!-- /.container -->
</div>
<!-- /.section -->

对于叠加悬停效果，我正在使用此CSS：

a .overlay {
opacity: 0;
filter: alpha(opacity=0);
z-index: 0; /* for Opera */
}

a:hover .overlay {
opacity: 1;
filter: alpha(opacity=100);
z-index: 1; /* for Opera */
}

.overlay {
display: block;
background-color: rgba(0,0,0,0.3);
background-repeat: no-repeat;
background-position: center center;
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
}

.overlay.zoom {
background-image: url(http://www.open-service.org/img/zoom.png);
}

我的问题是叠加层扩展到div大小，而不仅仅是图像的大小。

为了说明这一点，我创建了这个jsfiddle：http://jsfiddle.net/5AR2H/6/

感谢。

使用Bootstrap 3悬停覆盖的动态图像大小库

0 个答案: