Bagaimana untuk Mencapai Peralihan Lancar untuk Imej Kabur pada Tuding dengan CSS?

Meringankan Peralihan CSS untuk Imej Kabur

Apabila menuding pada imej dengan kelas pseudo CSS :hover, gunakan penapis kabur menggunakan sifat penapis mencipta kesan yang menarik secara visual. Walau bagaimanapun, lazimnya diperhatikan bahawa imej kembali kepada keadaan normalnya secara tiba-tiba apabila tetikus dialih keluar. Tingkah laku ini boleh dikaitkan dengan kekurangan kesan "ease-out" semasa fasa peralihan.

Untuk menyelesaikan isu ini dan memastikan peralihan yang lancar dalam kedua-dua arah, adalah penting untuk menggunakan sifat peralihan pada elemen sebenar, bukannya semata-mata kepada :hover pseudo-class. Ini membolehkan peralihan berlaku dengan lancar apabila menuding pada dan mematikan elemen.

Contoh:

Pertimbangkan coretan kod berikut:

<code class="css">.img-blur {
  transition: all 0.35s ease-in-out;
}
.img-blur:hover {
  filter: blur(4px);
}</code>

Contoh yang dikemas kini ini menunjukkan cara menggunakan sifat peralihan pada kelas .img-blur dan bukannya kelas pseudo :hover menghasilkan peralihan yang beroperasi dalam kedua-dua arah.

Peningkatan Tambahan:

Satu lagi keperluan biasa ialah menindih teks pada imej kabur apabila tetikus melayang di atasnya. Walaupun ini boleh dicapai menggunakan JavaScript, kaedah CSS menawarkan penyelesaian yang lebih cekap dan ringan. Begini caranya:

<code class="css">.img-blur {
  transition: all 0.35s ease-in-out;
  position: relative;
}
.img-blur:hover {
  filter: blur(4px);
  position: absolute;
  z-index: 1;
}
.img-blur:hover .text-overlay {
  display: block;
}

.text-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  color: white;
  padding: 10px;
  text-align: center;
  display: none;
}</code>

Kod ini memperkenalkan elemen .text-overlay, yang disembunyikan secara lalai. Apabila melayang di atas imej, kelas pseudo :hover diaktifkan, menjadikan tindanan kelihatan dan menjajarkannya ke atas imej kabur. Pendekatan ini memberikan kawalan yang lebih besar ke atas penggayaan tindanan teks.

Atas ialah kandungan terperinci Bagaimana untuk Mencapai Peralihan Lancar untuk Imej Kabur pada Tuding dengan CSS?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!