Hover class dan Responsive Images Dengan Materialize

Selamat datang kembali di website tips dan trik Dumet School, pada kesempatan kali ini kita akan melanjutkan artikel sebelumnya yang membahas tentang framework css materialize dengan judul Hover class dan Responsive Images Dengan Materialize dimana kita akan membuat sebuah hover dengan hanya memanggil class nya saja. Dan selanjutnya kita akan membuat sebuah responzive image, untuk responsive image di dalam materialize ini. Hampir sama dengan bootstrap namun di dalam materialize ini sedikit berbeda, hanya nama class nya saja yang berbeda. Dengan menggunakan kedua metode ini kita bisa memberikan pada tag apa saja yang mau kita berikan fungsi tersebut. Oke langsung saja kita impelementasikan Hover class dan Responsive Images Dengan Materialize teman – teman siapkan file materialize nya. Kemudian di file index.html berikan script di bawah ini

    <div class="container">
      <div class="row">
         <div class="col s12 m8 offset-m2 l6 offset-l3 teal lighten-2">
	        <div class="card-panel grey lighten-5 z-depth-1">
	          <div class="row valign-wrapper">
	            <div class="col s2">
	              <img src="dumet_school.png" alt="" class="circle responsive-img">
	            </div>
	            <div class="col s10">
	              <span class="black-text">
	                Hover class dan Responsive Images Dengan Materialize
	              </span>
	            </div>
	          </div>
	        </div>
	      </div>        
      </div>  
    </div>

Untuk image nya teman – teman berikan gambar apa saja, jika sudah save dan jalankan pada browser nya akan menghasilkan output seperti gambar di bawah ini

Kemudian teman – teman pada browser nya aktifkan mode responsive browsernya, ubah setiap device nya konten akan otomasis responsive. Jika dirasa belum cukup, teman – teman buat lagi layout image nya dan berikan class responsive-img dengan begitu akan menghasilkan layout yang responsive. Selanjutnya kita implementasikan hover class nya, pada default materialize sudah memiliki box shadownya, kita tidak perlu membuatnya dengan manual melainkan hanya menambahkan hover pada class nya. Nah saya akan mencoba membverikan pada hasil script di atas ini dengan cara menambahkan class hoverable di dalam col nya

Jika sudah save dan jalankan pada browsernya, arahkan mouse pada area konten nya

Bisa teman – teman perhatikan pada gambar di atas ini, area konten setiap pinggirnya memiliki box shadownya. Karena hasil dari efek class hoverable.

Mudah sekali bukan..??

Sekian pada artikel kali ini tentang Hover class dan Responsive Images Dengan Materialize semoga bermanfaat dan menambah pengetahuan tentang framework materialize. Kita berjumpa kembali pada artikel yang akan datang, terimakasih dan sampai Jumpa.

The post Hover class dan Responsive Images Dengan Materialize appeared first on Kursus Website Terbaik.