-1

所以我有这个 HTML 代码：

<a class="caption caption-1" data-title="Offer 1" data-description="desc">
    <img src="photos/1.jpg" alt="Illustration of Cafe Racer">
</a>

.caption-1::before,
.caption-1::after {
    opacity: 0;
    position: absolute;
    width: 100%;
    color: #fff;
    padding: 20px;
    -webkit-transition: opacity 0.3s;
    -moz-transition: opacity 0.3s;
    transition: opacity 0.3s;
}

.caption-1::before {
    content: attr(data-title);
    top: 0;
    height: 30%;
    background: #a21f00;
    font-size:100%;
    font-weight: 300;
}

.caption-1::after {
    content: '\201C' attr(data-description) '\201D';
    top: 30%;
    height: 70%;
    background: #db2e00;
    font-size: 100%;
    text-align: right;
}

我有这张名为 .caption-1 的图片：
http
://cl.ly/image/2r1v3z223F07 当我将其悬停时，它会显示为：http://cl.ly/image/3C2Y2p2E0H3D 这
两个
文本分别位于在：之前和：之后，所以我想用文本填充整个框。

4

2 回答 2

0

你需要使abeposition:relative和display:inline-block.

您还需要设置box-sizing属性，以便在宽度/高度计算中包含填充

此外，您需要在悬停后更改不透明度（并且您还需要left:0设置::after）

.caption-1{
    display:inline-block;
    position:relative;
}
.caption-1::before, .caption-1::after {
    opacity: 0;
    position: absolute;
    width: 100%;
    color: #fff;
    padding: 20px;
    -webkit-transition: opacity 0.3s;
    -moz-transition: opacity 0.3s;
    transition: opacity 0.3s;

    -moz-box-sizing:border-box;
    -webkit-box-sizing:border-box;
    box-sizing:border-box;
}
.caption-1::before {
    content: attr(data-title);
    top: 0;
    height: 30%;
    background: #a21f00;
    font-size:100%;
    font-weight: 300;
}
.caption-1::after {
    content:'\201C' attr(data-description)'\201D';
    top: 30%;
    left:0;
    height: 70%;
    background: #db2e00;
    font-size: 100%;
    text-align: right;
}
.caption-1:hover::after,
.caption-1:hover::before{
    opacity:1;
}

演示在 http://jsfiddle.net/fZytM/1/

于 2013-10-07T22:01:47.593 回答
0 
.caption-1 {
            position: relative;
            height: 300px;
            width: 300px;
            display: block;
            overflow: hidden;
        }

        .caption-1 img {
            height: 100%;
            width: 100%;
        }

            .caption-1:before {
                position: absolute;
                content: attr(data-title);
                background: red;
                top: 0;
                height: 30%;
                font-size: 150%;
                padding: 30px;
                width: 100%;
                color: #fff;
                opacity: 0;
                -moz-transition: opacity 0.3s;
                -o-transition: opacity 0.3s;
                -webkit-transition: opacity 0.3s;
                transition: opacity 0.3s;
            }

            .caption-1:after {
                position: absolute;
                content: '\201C' attr(data-description) '\201D';
                left: 0;
                top: 30%;
                padding: 35px 15px;
                height: 70%;
                background: #db2e00;
                width: 100%;
                color: #fff;
                opacity: 0;
                -webkit-transition: opacity 0.3s;
                -moz-transition: opacity 0.3s;
                -o-transition: opacity 0.3s;
                transition: opacity 0.3s;
            }

            .caption-1:hover:after {
                opacity: 1;
            }

            .caption-1:hover:before {
                opacity: 1;
            }
于 2013-10-07T22:02:00.433 回答