Bagaimana untuk Mencapai Kesan Ease-Out Lancar untuk Peralihan CSS pada Tuding Imej?

Isu Peralihan CSS: Mudah Masuk Tetapi Bukan Mudah Keluar

Soalan ini berkenaan dengan pelaksanaan peralihan CSS untuk imej. Apabila melayang di atas imej, imej itu kabur dengan lancar, tetapi apabila tetikus pergi, ia tiba-tiba kembali kepada keadaan asalnya. Tingkah laku yang diingini adalah untuk imej meredakan kesan kabur. Selain itu, soalan itu meneroka kemungkinan memaparkan teks pada tuding menggunakan CSS sahaja.

Penyelesaian untuk Memudahkan

Untuk mencapai kesan pelonggaran yang diingini, ubah suai Tetapan peralihan CSS dengan menerapkannya pada elemen itu sendiri, bukannya pada kelas pseudo :hover. Ini memastikan peralihan berlaku semasa menuding dan mematikan:

<code class="css">.img-blur {
  transition: all 0.35s ease-in-out;
}</code>

Menambah Teks pada Tuding

Untuk memaparkan teks apabila menuding pada imej menggunakan CSS sahaja , gunakan :after pseudo-element:

<code class="css">.img-blur {
  transition: all 0.35s ease-in-out;
}
.img-blur:after {
  content: "Learn More";
  display: none;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: white;
  padding: 10px;
  border: 1px solid black;
  border-radius: 5px;
}
.img-blur:hover:after {
  display: block;
}</code>

Dengan mengikut pelarasan ini, imej akan hilang daripada kesan kabur apabila kursor tetikus keluar dan teks akan muncul pada tuding.

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