-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
この2つのテキストはそれぞれにあります:before と :after で、ボックス全体をテキストで埋めたいと思います。

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 に答える