Bagaimana untuk Mencipta Tindanan Imej CSS dengan Ketinggian Berbeza tetapi Lebar Konsisten?

Tindan CSS pada Imej: Panduan Komprehensif

Pengenalan

Membuat tindanan imej ialah tugas biasa dalam reka bentuk web. Ia membolehkan anda menambah teks, ikon atau maklumat lain pada imej, mewujudkan kesan visual yang menarik dan bermaklumat. Dalam artikel ini, kami akan meneroka cara untuk mencapai ini menggunakan CSS, memfokuskan secara khusus pada kes di mana imej mempunyai ketinggian yang berbeza sambil mengekalkan lebar yang konsisten.

Mencipta Tindanan Imej

Untuk mencapai kesan ini, kami akan menggunakan bekas div untuk menyimpan imej dan kandungan tindanan. Peraturan CSS berikut akan membuat tindanan:

.image-container {
    position: relative;
    width: 200px;
}

.image-container .after {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    display: none;
    color: #FFF;
}

.image-container:hover .after {
    display: block;
    background: rgba(0, 0, 0, .6);
}

Struktur HTML

Struktur HTML akan termasuk imej dan kandungan tindanan:

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

Mempertingkatkan Tindanan

Untuk menambah baik penampilan tindanan, kami boleh menambah gaya CSS tambahan. Contohnya:

.image-container .after .content {
    position: absolute;
    bottom: 0;
    text-align: center;
    width: 100%;
    padding: 5px;
}

Ini akan menjajarkan kandungan tindanan secara menegak di bahagian bawah.

Demo Tersuai

Berikut ialah demo yang lebih terlibat dengan tambahan penggayaan, seperti ikon dan teks:

.image-container {
    position: relative;
    display: inline-block;
}

.image-container img {
    display: block;
}

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

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

<div class="image-container">
    <img src="image.jpg">
    <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>

Demo yang dikemas kini ini menambahkan ikon zum animasi pada tindanan, memberikan minat visual tambahan.

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