Bagaimanakah Saya Boleh Mencipta Tindanan Hover Imej Hanya Menggunakan CSS?-tutorial css-php.cn

Bagaimanakah Saya Boleh Mencipta Tindanan Hover Imej Hanya Menggunakan CSS?

Linda Hamilton

Lepaskan： 2024-12-15 09:32:13

asal

419 orang telah melayarinya

How Can I Create Image Hover Overlays Using Only 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>

Salin selepas log masuk

Tetapkan kedudukan relatif dan dimensi pilihan kepada .imej:

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

Salin selepas log masuk

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

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

Salin selepas log masuk

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;
}

Salin selepas log masuk

Jadikan tindanan kelihatan pada tuding:

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

Salin selepas log masuk

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!