Bagaimana untuk Mencipta Tindanan Hitam Halimunan CSS pada Tuding Imej Menggunakan Elemen Pseudo?

Tindan Hitam Halimunan CSS pada Tuding

Mencapai tindanan hitam lutsinar pada imej semasa tuding sememangnya boleh dilakukan menggunakan CSS tulen. Walau bagaimanapun, pendekatan yang disebut dalam sampel kod awal anda, yang melibatkan penggunaan div tindanan, mungkin tidak sesuai kerana isu dengan kedudukan dan keterlihatan.

Penyelesaian yang lebih berkesan melibatkan penggunaan unsur pseudo. Begini cara ia berfungsi:

Kod CSS

.image {
  position: relative;
  /* Set dimensions as needed (or omit for responsiveness) */
  width: 400px;
  height: 400px;
}

.image img {
  width: 100%;
  vertical-align: top;
}

.image:after {
  content: '\A'; /* Pseudo content to trigger browser rendering */
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background: rgba(0, 0, 0, 0.6); /* Black with 60% opacity */
  opacity: 0; /* Initially invisible */
  transition: all 1s; /* Animation transition */
}

.image:hover:after {
  opacity: 1; /* Shows overlay on hover */
}

Penjelasan

1. Kami menggunakan div dengan kelas "imej" untuk membalut imej. Ia diletakkan secara relatif untuk membolehkan elemen pseudo diletakkan dalam sempadannya.
2. Kami menggayakan elemen img kanak-kanak untuk mempunyai lebar 100% dan penjajaran menegak ke atas.
3. Pseudo -elemen (.image:after) diletakkan secara mutlak dalam div imej. Ia diberi kelegapan 0 pada mulanya, menjadikannya tidak kelihatan.
4. Pada tuding (.image:hover:after), kelegapan unsur pseudo berubah kepada 1, menjadikannya kelihatan dan mencipta tindanan hitam dengan berkesan.

Tambahan Ciri

Tambahan Teks:
Untuk menambah teks pada tindanan pada tuding, anda boleh menggunakan sifat kandungan dalam gaya unsur pseudo. Contohnya:

.image:after {
  content: 'Hover Text...'; /* Custom overlay text */
}

Penyesuaian:
Anda boleh melaraskan kelegapan dan kelajuan peralihan untuk mengubah suai kesan keterlihatan. Selain itu, anda boleh menambah imej latar belakang atau kecerunan untuk mencipta tindanan yang lebih kompleks.

Atas ialah kandungan terperinci Bagaimana untuk Mencipta Tindanan Hitam Halimunan CSS pada Tuding Imej Menggunakan Elemen Pseudo?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!