Bagaimana untuk Mencipta Kesan Tindanan Gelap dengan Teks dan Ikon pada Tuding Imej Menggunakan CSS?-tutorial css-php.cn

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

Patricia Arquette

Lepaskan： 2024-10-29 18:39:14

asal

650 orang telah melayarinya

How to Create a Dark Overlay Effect with Text and Icons on Image Hover Using CSS?

Mencipta Kesan Tindanan pada Imej dengan CSS

Dalam artikel ini, kita akan meneroka cara mencapai kesan tindanan gelap dengan teks dan ikon apabila menuding pada imej menggunakan CSS.

Masalah:

Anda menyasarkan untuk mencipta galeri imej interaktif di mana menuding di atas imej memaparkan tindanan gelap dengan tersuai kandungan, seperti yang digambarkan dalam imej yang disediakan. Cabarannya terletak pada mencapai kesan ini untuk imej dengan ketinggian yang berbeza-beza, dengan lebar yang konsisten.

Penyelesaian:

Untuk mencapainya, kami menggunakan gabungan HTML dan CSS seperti berikut:

Penanda HTML:

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

Salin selepas log masuk

Peraturan Gaya CSS:

<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>

Salin selepas log masuk

Dalam kod yang dikemas kini ini, kandungan tindanan diletakkan di bahagian bawah dengan penjajaran berpusat. Selain itu, ikon zum telah ditambahkan, yang menukar warna pada tuding. Penyesuaian ini menunjukkan fleksibiliti penyelesaian yang disediakan dan memperkasakan anda untuk membuat tindanan imej yang disesuaikan.

Atas ialah kandungan terperinci Bagaimana untuk Mencipta Kesan Tindanan Gelap dengan Teks dan Ikon pada Tuding Imej Menggunakan CSS?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!