hujung hadapan web
html tutorial
Bagaimana untuk membuat butiran hover imej menggunakan HTML dan CSS?
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;
}
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 id="How-to-Create-Image-Hovered-Detail-using-HTML-CSS">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 id="Image">Image 1</h2>
<p>This is some description for the image</p>
</div>
</div>
</body>
</html>
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!
Alat AI Hot
Undresser.AI Undress
Apl berkuasa AI untuk mencipta foto bogel yang realistik
AI Clothes Remover
Alat AI dalam talian untuk mengeluarkan pakaian daripada foto.
Undress AI Tool
Gambar buka pakaian secara percuma
Clothoff.io
Penyingkiran pakaian AI
Video Face Swap
Tukar muka dalam mana-mana video dengan mudah menggunakan alat tukar muka AI percuma kami!
Artikel Panas
Alat panas
Notepad++7.3.1
Editor kod yang mudah digunakan dan percuma
SublimeText3 versi Cina
Versi Cina, sangat mudah digunakan
Hantar Studio 13.0.1
Persekitaran pembangunan bersepadu PHP yang berkuasa
Dreamweaver CS6
Alat pembangunan web visual
SublimeText3 versi Mac
Perisian penyuntingan kod peringkat Tuhan (SublimeText3)
Topik panas
Adakah HTML mudah belajar untuk pemula?
Apr 07, 2025 am 12:11 AM
HTML sesuai untuk pemula kerana mudah dan mudah dipelajari dan dapat melihat hasilnya dengan cepat. 1) Keluk pembelajaran HTML adalah lancar dan mudah dimulakan. 2) Hanya menguasai tag asas untuk mula membuat laman web. 3) Fleksibiliti yang tinggi dan boleh digunakan dalam kombinasi dengan CSS dan JavaScript. 4) Sumber pembelajaran yang kaya dan alat moden menyokong proses pembelajaran.
Peranan HTML, CSS, dan JavaScript: Tanggungjawab Teras
Apr 08, 2025 pm 07:05 PM
HTML mentakrifkan struktur web, CSS bertanggungjawab untuk gaya dan susun atur, dan JavaScript memberikan interaksi dinamik. Ketiga melaksanakan tugas mereka dalam pembangunan web dan bersama -sama membina laman web yang berwarna -warni.
Apakah contoh tag permulaan dalam html?
Apr 06, 2025 am 12:04 AM
Anexampleofastartartingtaginhtmlis, yangbeginsaparagraph.startingtagsareessentialinhtmlasttheyinitiateelements, definetheirtypes, andarecrucialforstructuringwebpagesandconstructionthedom.
Memahami HTML, CSS, dan JavaScript: Panduan Pemula
Apr 12, 2025 am 12:02 AM
WebDevelopmentReliesOnhtml, CSS, andjavascript: 1) HtmlStructuresContent, 2) CSSStylesit, dan3) JavaScriptaddsInteractivity, Formingthebasisofmodernwebexperiences.
Bagaimana untuk melaksanakan susun atur penyesuaian kedudukan paksi y dalam anotasi web?
Apr 04, 2025 pm 11:30 PM
Algoritma Adaptif Kedudukan Y-Axis untuk Fungsi Anotasi Web Artikel ini akan meneroka cara melaksanakan fungsi anotasi yang serupa dengan dokumen perkataan, terutama bagaimana menangani selang antara anotasi ...
GITEE PAGES PENYEDIAAN LAMAN WEB STATIC Gagal: Bagaimana menyelesaikan masalah dan menyelesaikan kesilapan fail tunggal 404?
Apr 04, 2025 pm 11:54 PM
Giteepages Statik Laman Web Penggunaan Gagal: 404 Penyelesaian Masalah dan Resolusi Ralat Semasa Menggunakan Gitee ...
Bagaimana menggunakan CSS3 dan JavaScript untuk mencapai kesan penyebaran dan membesarkan gambar -gambar sekitarnya selepas mengklik?
Apr 05, 2025 am 06:15 AM
Untuk mencapai kesan penyebaran dan membesarkan imej sekitarnya selepas mengklik pada imej, banyak reka bentuk web perlu mencapai kesan interaktif: klik pada imej tertentu untuk membuat sekitar ...
HTML, CSS, dan JavaScript: Alat penting untuk pemaju web
Apr 09, 2025 am 12:12 AM
HTML, CSS dan JavaScript adalah tiga tiang pembangunan web. 1. HTML mentakrifkan struktur laman web dan menggunakan tag seperti, dan sebagainya. 2. CSS mengawal gaya laman web, menggunakan pemilih dan atribut seperti warna, saiz font, dan lain-lain.
