Selamat datang kembali di website tips dan trik Dumet School, berjumpa kembali dengan saya pada pembahasan tips – tips seputar dunia website. Pada kesempatan kali ini saya akan memberikan tips tentang bagaimana Cara Membuat Thumbnail Image Dengan html dan css, thumbnail atau yang biasa di sebut card digunakan untuk membuat sebuah layout image dengan ada border setiap sisinya lalu pada saat mouse di arahkan pada area image terlihat ada hover border nya. Nah di bawah ini adalah gambar thumbnail yang nanti kita akan buat
Kemudian pada saat mouse di dalam area thumbnail maka akan muncul border pada setiap sisi nya
Saya menggunakan warna lightblue, baik langsung saja kita implementasikan Cara Membuat Thumbnail Image Dengan html dan css. Teman – teman siapkan text editornya, kemudian ketikkan script html nya seperti gambar di bawah ini
<!DOCTYPE html> <html> <head> </head> <body> <h2>Cara Membuat Thumbnail Image Dengan html dan css</h2> <a target="_blank" href="slide.jpg"> <img src="slide.jpg" alt="Forest"> </a> <a target="_blank" href="slide1.jpg"> <img src="slide1.jpg" alt="Forest"> </a> <a target="_blank" href="slide2.jpg"> <img src="slide2.jpg" alt="Forest"> </a> <a target="_blank" href="slide3.jpg"> <img src="slide3.jpg" alt="Forest"> </a> </body> </html>
Kemudian save dengan nama index.html, maka hasil sementara akan tampil output seperti gambar di bawah ini
Selanjutnya kita akan menambahkan style css nya untuk memberntuk atau membuat sebuah thumbnail, teman – teman ketikkan atau tambahkan script css nya di bawah ini
img {
border: 1px solid #ddd;
border-radius: 4px;
padding: 5px;
width: 350px;
margin-right: 10px
}
img:hover {
box-shadow: 0 0 9px 4px rgba(0, 140, 186, 0.5);
}
</style>
Jika sudah save dan refresh pada browser nya, maka dengan begitu thumbnail berhasil kita buat.
Pada saat mouse di arahkan pada thumbnail maka hover akan aktive dimana di dalam hover terdapat box-shadow: 0 0 9px 4px rgba(0, 140, 186, 0.5); yang menghasilkan setiap sisi nya terdapat border-color nya. Demikianlah Cara Membuat Thumbnail Image Dengan html dan css semoga bermanfaat untuk teman – teman yang khusunya baru belajar html dan css. Kita jumpa kembali pada artikel yang akan datang, terimakasih dan sampai jumpa.