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="image.jpg">
</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!

Kenyataan Laman Web ini

Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn