Bagaimana untuk Mencipta Tindanan Imej dengan CSS dan HTML?

Meletakkan Tindanan pada Imej Menggunakan CSS

Mencapai kesan tindanan warna gelap dengan teks dan ikon pada imej pada tuding boleh dicapai dengan CSS dan HTML berikut:

.image-container {
    position: relative;
    width: 200px;
    height: 300px;
}
.image-container .after {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: none;
    color: #FFF;
}
.image-container:hover .after {
    display: block;
    background: rgba(0, 0, 0, .6);
}

<div class="image-container">
    <img src="http://lorempixel.com/300/200" />
    <div class="after">This is some content</div>
</div>

Berikut ialah demo langsung: http://jsfiddle.net/6Mt3Q/

Menyesuaikan Tindanan dengan Penggayaan Tambahan

Untuk meningkatkan penampilan tindanan, anda boleh menambah penggayaan tambahan seperti berikut:

<code class="css">.image-container .after .content {
    position: absolute;
    bottom: 0;
    font-family: Arial;
    text-align: center;
    width: 100%;
    box-sizing: border-box;
    padding: 5px;
}
.image-container .after .zoom {
    color: #DDD;
    font-size: 48px;
    position: absolute;
    top: 50%;
    left: 50%;
    margin: -30px 0 0 -19px;
    height: 50px;
    width: 45px;
    cursor: pointer;
}
.image-container .after .zoom:hover {
    color: #FFF;
}</code>

<code class="html"><link href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.min.css" rel="stylesheet"/>

<div class="image-container">
    <img src="http://lorempixel.com/300/180" />
    <div class="after">
        <span class="content">This is some content. It can be long and span several lines.</span>
        <span class="zoom">
            <i class="fa fa-search"></i>
        </span>
    </div>
</div></code>

Atas ialah kandungan terperinci Bagaimana untuk Mencipta Tindanan Imej dengan CSS dan HTML?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!