Bagaimana untuk Mencipta Kesan Tindanan Gelap dengan Teks dan Ikon pada Tuding Imej Menggunakan CSS?

<img src="image-url" />
<div class="after">This is some content</div>

<code class="css">.image-container {
    position: relative;
    width: <fixed width>;
}
.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);
}</p>
<p>Dalam kod ini, .image-container berfungsi sebagai pembungkus untuk imej dan div tindanan. Kedudukan .after memastikan tindanan meliputi keseluruhan imej, manakala sifat paparan bersyarat menjadikan tindanan kelihatan hanya pada tuding. Anda boleh menyesuaikan penampilan tindanan dengan mengubah suai warna latar belakang dan kandungan dalam .after div.</p>
<p><strong>Penyesuaian:</strong></p>
<p>Penyelesaian yang disediakan berfungsi sebagai templat asas, dan anda boleh meningkatkan estetikanya dengan menambahkan peraturan CSS tambahan. Contohnya, anda boleh menjajarkan kandungan secara menegak dalam tindanan, menukar gaya ikon atau memasukkan sifat peralihan untuk animasi tuding yang lebih lancar.</p>
<p>Berikut ialah contoh yang diubah suai dengan penggayaan tambahan:</p>
<pre class="brush:php;toolbar:false"><code class="css">.image-container .after .content {
    position: absolute;
    bottom: 5px;
    text-align: center;
    width: 100%;
    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>