Question

所以我有这个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
这2个文本分别位于：before和an：after之后，所以我想用文本填充整个框。

Answer 1

您需要a为position: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/

Answer 2

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

我怎样才能适应：文字之后

2 个答案: