Bagaimanakah Saya Boleh Mencipta Tindanan Hover Imej Hanya Menggunakan CSS?

Tindan Tuding Imej dengan CSS Tulen

Menggunakan HTML dan CSS, anda boleh menambah tindanan hitam lutsinar pada imej apabila tetikus menuding ke atas ia. Untuk mencapai ini tanpa menggunakan elemen tindanan, pertimbangkan untuk menggunakan elemen pseudo sebaliknya.

Balut imej dengan

elemen:

<div class="image">
  <img  src="/static/imghwm/default1.png" data-src="image.jpg" class="lazy" alt="Bagaimanakah Saya Boleh Mencipta Tindanan Hover Imej Hanya Menggunakan CSS?" >
</div>

Tetapkan kedudukan relatif dan dimensi pilihan kepada .imej:

.image {
  position: relative;
  width: 200px;  /* Optional */
  height: 200px;  /* Optional */
}

Tetapkan elemen img kanak-kanak untuk mempunyai lebar 100% dan penjajaran menegak.

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

Buat elemen pseudo untuk memaparkan tindanan:

.image:after {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background: rgba(0, 0, 0, 0.5);
  opacity: 0;
  transition: opacity 1s;
}

Jadikan tindanan kelihatan pada tuding:

.image:hover:after {
  opacity: 1;
}

Kini, apabila kursor melayang di atas imej, tindanan hitam lutsinar akan pudar dengan lancar.

Atas ialah kandungan terperinci Bagaimanakah Saya Boleh Mencipta Tindanan Hover Imej Hanya Menggunakan CSS?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!