Bagaimana untuk Menunjukkan Teks pada Hover Imej Menggunakan HTML dan CSS?

Bagaimana untuk memaparkan teks pada tuding imej?

Menunjukkan maklumat perihalan semasa menuding imej adalah keperluan biasa. Artikel ini menerangkan cara untuk melaksanakan fungsi ini secara elegan menggunakan HTML dan CSS.

Masalah

Ramai pembangun akan menggunakan sprite imej dan tuding untuk melaksanakan ciri ini. Walau bagaimanapun, kaedah ini kurang ideal dan sukar untuk menghasilkan kesan yang tepat. Oleh itu, artikel ini akan menunjukkan kepada anda cara menggunakan teks sebenar, bukan imej.

Penyelesaian

Mencapai ciri ini adalah mudah. Hanya bungkus imej dan tuding maklumat perihalan dalam div dengan dimensi yang sama seperti imej. Kemudian, gunakan CSS untuk memaparkan penerangan apabila div dilegar.

Contoh Kod

Yang berikut menggunakan HTML dan CSS Contoh kod untuk melaksanakan fungsi ini:

HTML:

<div class="img__wrap">
  <img class="img__img" src="image.jpg" />
  <p class="img__description">This image looks super neat.</p>
</div>

CSS :

/* quick reset */
* {
  margin: 0;
  padding: 0;
  border: 0;
}

/* relevant styles */
.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;

  /* transition effect. not necessary */
  transition: opacity .2s, visibility .2s;
}

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

Dalam contoh di atas: "

<div class="img__wrap">

Membungkus maklumat imej dan penerangan dalam satu div, dimensi div ini adalah sama dengan imej (tinggi 200px, lebar 257px). 🎜>

.img__description {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;

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