Bagaimanakah Saya Boleh Mencipta Kesan Hover untuk Memaparkan Teks Pada Imej Menggunakan HTML dan CSS?

Tuding untuk Mendedahkan Teks pada Imej dengan HTML dan CSS

Mencipta kesan tuding untuk memaparkan teks di atas imej mungkin kelihatan seperti tugas yang menakutkan , tetapi dengan bantuan HTML dan CSS, ini adalah proses yang sangat mudah.

Masalahnya: Sprite Imej dengan Fungsi Terhad

Ramai pembangun pada mulanya menggunakan sprite imej, di mana keadaan tuding yang berbeza dipaparkan dengan mengalihkan kedudukan imej latar belakang. Walau bagaimanapun, pendekatan ini mempunyai had, kerana ia tidak membenarkan penggunaan teks sebenar.

Penyelesaian: Tindanan Imej Telus

Untuk mencapai kesan yang diingini, kami boleh membalut kedua-dua imej dan teks tuding dalam satu bekas dengan dimensi yang sama seperti imej. Menggunakan CSS, kami akan meletakkan teks tuding secara mutlak dalam bekas ini dan menjadikannya tidak kelihatan secara lalai.

.img__wrap {
  position: relative;
  height: 200px;
  width: 257px;
}

.img__description {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background: rgba(29, 106, 154, 0.72);
  color: #fff;
  visibility: hidden;
  opacity: 0;
}

Apabila pengguna menuding di atas bekas, kami menggunakan tuding CSS untuk mendedahkan teks tuding secara beransur-ansur:

.img__wrap:hover .img__description {
  visibility: visible;
  opacity: 1;
}

HTML Markup

<div class="img__wrap">
  <img  class="img__img lazy" src="/static/imghwm/default1.png" data-src="http://placehold.it/257x200.jpg" alt="Bagaimanakah Saya Boleh Mencipta Kesan Hover untuk Memaparkan Teks Pada Imej Menggunakan HTML dan CSS?" >
  <p class="img__description">This image looks super neat.</p>
</div>

Dengan teknik ini, anda boleh memaparkan teks dinamik dengan mudah pada imej pada tuding, memberikan tapak web anda sentuhan yang digilap dan interaktif.

Atas ialah kandungan terperinci Bagaimanakah Saya Boleh Mencipta Kesan Hover untuk Memaparkan Teks Pada Imej Menggunakan HTML dan CSS?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!