Hallo sobat program, bertemu lagi dengan saya Rizal dan masih diwebsite dumetschool ini. Pada kesempatan kali ini saya akan meriview atau sedikit sharing tentang hover gambar text yang saya dapat dari website codepen.io dan untuk lebih jelasnya pada pembahasan kali ini kita akan membahas tentang Cara Membuat Gambar Hover Text dengan HTML CSS.
Oke jadi kita disini akan mencoba membuat sebuah gambar dengan hover text dengan memanfaatkan property-property yang ada didalam CSS yaitu transform, transition, posisiton dan banyak yang lainnya.
Untuk lebih jelasnya mari kita coba saja langsung ya teman-teman, silahkan buat foldernya lalu siapkan sebuah gambar bebas yang teman2 pilih diletakan didalam folder yang dibuat tadi lalu jalankan text-editornya dan ketiklah kode HTML seperti pada contoh dibawah ini :
|
1 2 3 4 5 6 7 8 9 |
<div class="container"> <div class="kotak"> <img src="dumet.png"> </div> <div class="text"> <h2>Dumet School</h2> <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p> </div> </div> |
Pada kode diatas yang img src teman-teman isi sesuai nama file gambar teman-teman ya. Dan Langkah selanjutnya, teman-teman tambahkan style CSS nya seperti pada contoh dibawah ini :
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 |
body { margin: 0; padding: 0; background: #95a5a6; } .container { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); width: 300px; height: 300px; background: #262626; overflow: hidden; } .container .kotak, .container .text { width: 100%; height: 100%; position: absolute; box-sizing: border-box; transition: .5s; } .container .kotak { top: 0; left: 0; } .container:hover .kotak { top: 0; left: -100%; } .container .kotak img { width: 100%; } .container .text { background: #262626; top: 0; left: 100%; padding: 15px 30px; } .container:hover .text { top: 0; left: 0%; } .container .text h2 { color: #fff; text-align: center; margin: 0; padding: 0 0 10px; border-bottom: 2px solid #fff; } .container .text p { margin: 20px 0 0; color: #fff; } |
Jika sudah silahkan teman-teman simpan dan silahkan coba dijalankan. Maka hasilnya akan menjadi seperti pada gambar dibawah ini :
Hasil demo live disini >>> DEMO
Jadi seperti itulah contoh sederhana tentang Cara Membuat Gambar Hover Text dengan HTML CSS. Yang saya dapatkan dari codepen.io dan silahkan teman-teman explore lagi ya.
Oke kalau begitu cukup sampai disini pembahasan kali ini tentang Cara Membuat Gambar Hover Text dengan HTML CSS semoga dapat bermanfaat buat teman-teman dan sampai bertemu dipembahasan selanjutnya.
Terimakasih