Bagaimana untuk Memaparkan Teks di Atas Imej pada Hover Menggunakan HTML dan CSS?

Memaparkan Teks pada Tuding dengan HTML dan CSS

Dalam usaha anda untuk mempamerkan teks ke atas imej pada tuding, anda pada mulanya menggunakan sprite imej -penyelesaian berasaskan. Walau bagaimanapun, anda kini mencari pendekatan yang lebih bersih menggunakan teks sebenar.

Penyelesaian terletak pada menggunakan elemen div sebagai pembungkus untuk kedua-dua imej dan penerangan. Div ini harus mempunyai dimensi yang sama seperti imej. Dengan memanipulasi CSS, anda kemudian boleh menentukan keterlihatan perihalan apabila menuding di atas div.

Coretan kod yang dipermudahkan untuk mencapai kesan ini:

.image-wrapper {
  position: relative;
  height: [Image height];
  width: [Image width];
}

.image-description {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: [Description background color];
  color: [Description text color];
  visibility: hidden;
  opacity: 0;
  transition: visibility .2s, opacity .2s;
}

.image-wrapper:hover .image-description {
  visibility: visible;
  opacity: 1;
}

Dalam HTML:

<div class="image-wrapper">
  <img src="image.jpg" />
  <p class="image-description">This is the image description.</p>
</div>

Atas ialah kandungan terperinci Bagaimana untuk Memaparkan Teks di Atas Imej pada Hover Menggunakan HTML dan CSS?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!