Hover class dan Responsive Images Dengan Materialize

Selamat datang kembali di blog tips dan trik Source Code Aplikasi, di kesempatan kali ini kita akan melanjutkan artikel sebelumnya yang membahas mengenai framework css materialize dengan judul Hover class dan Responsive Images Dengan Materialize dimana kita akan membangun sebuah hover dengan hanya memanggil class nya saja. Dan berikutnya kita akan membangun sebuah responzive image, bagi memiliki tampilan yang dinamis image di pada materialize ini. Hampir sama dengan bootstrap namun di pada materialize ini sedikit berbeda, hanya nama class nya saja yang berbeda. Dengan menggunakan kedua cara ini kita dapat memberikan di tag apa saja yang mau kita berikan kegunaan tersebut. Oke seketika 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=Selamat datang kembali di blog tips dan trik  Hover class dan Memiliki tampilan yang dinamis Images Dengan Materialize class=circle responsive-img>
            </div>
            <div class=col s10>
              <span class=black-text>
                Hover class dan Memiliki tampilan yang dinamis Images Dengan Materialize
              </span>
            </div>
          </div>
        </div>
      </div>        
      </div>  
    </div>

Bagi image nya teman – teman berikan gambar apa saja, bila telah save dan jalankan di browser nya akan menghasilkan output seperti gambar di bawah ini

Kemudian teman – teman di browser nya aktifkan mode memiliki tampilan yang dinamis browsernya, ubah setiap device nya konten akan otomasis memiliki tampilan yang dinamis. Bila dirasa belum lumayan, teman – teman bikin lagi layout image nya dan berikan class responsive-img dengan seperti itu akan menghasilkan layout yang memiliki tampilan yang dinamis. Berikutnya kita implementasikan hover class nya, di default materialize telah mempunyai box shadownya, kita tak perlu membuatnya dengan manual melainkan hanya menambahkan hover di class nya. Nah saya akan mencoba membverikan di hasil script di atas ini dengan cara menambahkan class hoverable di pada col nya

Bila telah save dan jalankan di browsernya, arahkan mouse di area konten nya

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

Gampang sekali bukan..??

Sekianlah di artikel kali ini mengenai Hover class dan Memiliki tampilan yang dinamis Images Dengan Materialize semoga bermanfaat dan menambah pengetahuan mengenai framework materialize. Kita berjumpa kembali di artikel yang akan datang, terimakasih dan hingga Jumpa.

Sumber https://kursuswebsite.org