Bagaimana untuk membuat butiran hover imej menggunakan HTML dan CSS?-html tutorial-php.cn

Bagaimana untuk membuat butiran hover imej menggunakan HTML dan CSS?

王林

Lepaskan： 2023-09-07 21:25:15

ke hadapan

1086 orang telah melayarinya

Bagaimana untuk membuat butiran hover imej menggunakan HTML dan CSS?

Menggunakan kesan tuding imej dengan butiran teks boleh menambah interaktiviti tambahan pada tapak web anda. Dengan menggunakan sedikit HTML dan CSS, anda boleh mengubah imej pegun menjadi entiti dengan kata-kata penjelasan apabila pengguna menuding ke atas imej. Tutorial ini akan membimbing anda untuk membangunkan kesan tuding ikon ringkas, termasuk kod HTML dan hiasan CSS yang diperlukan untuk mencapai kesan akhir. Sama ada anda seorang pemula atau pencipta laman web yang berpengalaman, artikel ini akan memberikan anda butiran yang anda perlukan untuk memperkayakan tapak web anda dan mencapai kesan levitasi foto yang jelas.

:pemilih tuding

CSS's :hover selector digunakan untuk memilih dan menggayakan elemen apabila pengguna menuding di atasnya. Pemilih :hover digunakan dengan pemilih lain untuk menggunakan gaya pada elemen HTML tertentu apabila kursor tetikus berada di atas elemen tersebut.

tatabahasa

selector:hover {
   property: value;
}

Salin selepas log masuk

Pemilih mewakili komponen HTML untuk disasarkan, manakala sifat dan nilai mewakili sifat CSS dan keadaan penilaiannya yang anda ingin gunakan pada komponen itu pada tuding.

kaedah

Menggunakan HTML dan CSS untuk mencipta hiasan ilustrasi yang dicetuskan oleh hover, kami akan mengambil langkah berikut -

Buat bekas untuk gambaran dan perwakilan - Kami akan menggunakan elemen div untuk mencipta bekas untuk imej dan penerangan. Bekas hendaklah diberi saiz dan dimensi tertentu untuk memastikan skopnya, dan gunakan atribut "kedudukan: relatif" untuk memudahkan penempatan arahan dalam bekas.
Tambah Imej - Kami akan menggunakan elemen img untuk menambah ilustrasi pada bekas. Selain itu, kami akan menentukan bahawa dimensi imej adalah 100% daripada dimensi bekas supaya ia mengekalkan perkadaran ideal dalam bekas.
Tambah penerangan - Kami akan menggunakan elemen div lain untuk menambah penerangan. Tambahkan atribut "kedudukan: mutlak" pada div ini dan letakkannya di bahagian paling bawah bekas supaya ia bertindih dengan ilustrasi
Style Description − Kami akan menggunakan CSS untuk mereka bentuk penerangan, termasuk pelbagai pengubahsuaian seperti menambah warna latar belakang, menukar warna teks dan menambah padding. Kami juga akan menggunakan sifat "display: flex" dan sifat "flex-direction: column" untuk memusatkan teks secara menegak dalam bekas keterangan.
Tambah kesan tuding − Untuk memaparkan penerangan apabila penuding tetikus melayang di atas imej, kami akan menggunakan pemilih ":hover" dalam CSS. Apabila penuding tetikus melayang di atas bekas, penerangan akan kelihatan dan imej akan dibesarkan sedikit untuk mencipta kesan tuding.
Tambah kesan peralihan − Untuk menjadikan kesan hover lebih lancar dan semula jadi, kami akan menambah kesan peralihan

Contoh

Kod berikut akan menunjukkan cara mencipta kesan tuding imej yang menarik secara visual menggunakan HTML dan CSS. Kod ini mentakrifkan elemen bekas dengan lebar dan ketinggian tetap, dengan limpahan tersembunyi dan imej di dalam bekas yang mengambil keseluruhan saiz bekas. Imej beralih dengan lancar dengan kesan pelonggaran 0.3 saat apabila tetikus dilegarkan di atasnya. Selain itu, bekas mengandungi elemen teks yang diletakkan di bahagian bawah bekas dengan warna latar belakang hitam separa lut sinar yang dikonfigurasikan untuk mengisi keseluruhan lebar dan ketinggian bekas. Objek teks juga mempunyai satu siri gaya yang memusatkan teks dalam objek. Komponen teks tidak kelihatan secara lalai, tetapi muncul dengan kesan pelonggaran 0.3 saat apabila tetikus melayang di atas bekas. Kesan ini dicapai dengan menggunakan sifat peralihan dan kelegapan pada elemen teks. Apabila tetikus melayang di atas bekas, imej dibesarkan sebanyak 20% untuk meningkatkan penyertaan dan interaksi pengguna. Kod tersebut akhirnya menghasilkan kesan tuding imej yang meningkatkan daya tarikan visual halaman web.

<!DOCTYPE html>
<html>
<head>
   <style>
      .container {
         position: relative;
         width: 300px;
         height: 200px;
         overflow: hidden;
      }
      .container img {
         width: 100%;
         height: 100%;
         transition: all 0.3s ease;
      }
      .text {
         position: absolute;
         bottom: 0;
         left: 0;
         background-color: rgba(0, 0, 0, 0.5);
         color: white;
         padding: 10px;
         width: 100%;
         height: 100%;
         display: flex;
         flex-direction: column;
         justify-content: center;
         align-items: center;
         opacity: 0;
         transition: all 0.3s ease;
      }
      .container:hover .text {
         opacity: 1;
      }
   </style>
</head>
<body>
   <h4>How to Create Image Hovered Detail using HTML & CSS?</h4>
   <div class="container">
      <img src=" https://picsum.photos/200/300" alt="image1">
      <div class="text">
         <h2>Image 1</h2>
         <p>This is some description for the image</p>
      </div>
   </div>
</body>
</html>

Salin selepas log masuk

KESIMPULAN

Secara keseluruhannya, mencipta kesan tuding untuk imej dengan butiran teks ialah cara terbaik untuk menambah lapisan dinamik tambahan pada tapak web anda. Dengan hanya beberapa baris kod HTML dan CSS, anda boleh menghidupkan imej untuk memberikan data penting kepada pelawat anda. Dengan arahan terperinci dalam tutorial ini, anda telah menguasai seni mereka bentuk kesan tuding imej yang ringkas namun berkuasa. Sama ada anda seorang pemula atau pembangun web yang berpengalaman, pendekatan ini boleh menjadi alat yang berharga untuk kemahiran pembangunan web anda. Mengapa tidak mencubanya dan melihat cara ia memperbaik tapak web anda?

Atas ialah kandungan terperinci Bagaimana untuk membuat butiran hover imej menggunakan HTML dan CSS?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!