Question

我正在尝试在包含叠加层和图像的div的中心底部放置一些文本。

但我怎么能实现这个目标呢？

HTML code：

<div class="container">
    <div class="row team-images">
        <div class="col-sm-3">
            <div class="team-item">
                <div class="team-image-overlay"></div>
                <img src="http://placehold.it/400x400" class="img-responsive" alt="" />
            </div>
        </div>
        <div class="col-sm-3">
            <div class="team-item">
                <div class="team-image-overlay"></div>
                <img src="http://placehold.it/400x400" class="img-responsive" alt="" />
            </div>
        </div>
        <div class="col-sm-3">
            <div class="team-item">
                <div class="team-image-overlay"></div>
                <img src="http://placehold.it/400x400" class="img-responsive" alt="" />
            </div>
        </div>
    </div>
</div>

CSS代码：

.team-images .team-item {
    position: relative;
}
.team-images img {
    width: 100%;
    height: 100%;
    margin: 0 0 15px;
}
.team-images .team-image-overlay {
    position: absolute;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(41, 128, 185, 0.4);
    color: #fff;
    -webkit-transition: all ease .5s;
    -moz-transition: all ease .5s;
    transition: all ease .5s;
}
.team-images .team-image-overlay:hover {
    background: rgba(24, 188, 156, 0);
}

以下是迄今为止创建的最新示例：https://jsfiddle.net/prp794Lb/1/

Answer 1

这个怎么样？

<div class="container">
<div class="row team-images">
    <div class="col-sm-3">
        <div class="team-item">
            <div class="team-text">Text here</div>
            <div class="team-image-overlay"></div>
            <img src="http://placehold.it/400x400" class="img-responsive" alt="" />
        </div>
    </div>
    <div class="col-sm-3">
        <div class="team-item">
            <div class="team-text">Lots and lots and lots and lots and lots of text here</div>
            <div class="team-image-overlay"></div>
            <img src="http://placehold.it/400x400" class="img-responsive" alt="" />
        </div>
    </div>
    <div class="col-sm-3">
        <div class="team-item">
            <div class="team-text">Text here</div>
            <div class="team-image-overlay"></div>
            <img src="http://placehold.it/400x400" class="img-responsive" alt="" />
        </div>
    </div>
</div>

    /* Latest compiled and minified CSS included as External Resource*/

/* Optional theme */
 @import url('//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-theme.min.css');
 body {
    margin: 10px;
}
.team-images .team-item {
    position: relative;
}
.team-images img {
    width: 100%;
    height: 100%;
    margin: 0 0 15px;
}
.team-images .team-image-overlay {
    position: absolute;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(41, 128, 185, 0.4);
    color: #fff;
    -webkit-transition: all ease .5s;
    -moz-transition: all ease .5s;
    transition: all ease .5s;
}
.team-images .team-image-overlay:hover {
    background: rgba(24, 188, 156, 0);
}
.team-item .team-text {
    position: absolute;
    width: 100%;
    bottom: 0;
    text-align: center;
}

https://jsfiddle.net/wL5Lf5se/3/

Answer 2

在叠加内部搜索并设置样式：

Demo

.team-images .team-image-overlay span {
    display:block;
    text-align:center;
    position:absolute;
    bottom:20px;
    left:20px;
    right:20px;
    opacity:0;
    transition: all .3s ease;
    color:#333;
}

.team-images .team-image-overlay:hover span {
    display:block;
    text-align:center;
    position:absolute;
    bottom:20px;
    left:20px;
    right:20px;
    opacity:1;
}

使用叠加层和图像将文本放置在div的中心底部

2 个答案: