menampilkan Gambar
Bulat:
Lingkaran:
berbatasan:
Teks:
Alam
bulat Gambar
Kelas w3-putaran menambahkan sudut bulat untuk gambar:
dilingkari Gambar
Kelas w3-lingkaran bentuk gambar ke lingkaran:
berbatasan Gambar
Kelas w3-perbatasan menambahkan perbatasan di sekitar gambar:
Hoverable Gambar
Kelas w3-melayang-opacity menambah transparansi ke gambar pada mouse-over:
Gambar sebagai Kartu
Bungkus salah satu w3-kartu-kelas * sekitar <img> elemen untuk menampilkan sebagai kartu (menambahkan bayangan):
Simon
Bos dari segala bos
Teks gambar
Posisikan teks dalam gambar dengan kelas w3-Tampilan-:
Kiri atas
Kanan atas
Kiri bawah
Kanan bawah
Tengah
Contoh
<div class="w3-display-container">
<img src="img_lights.jpg"
alt="Lights">
<div class="w3-display-topleft w3-container">Top
Left</div>
<div class="w3-display-topright w3-container">Top
Right</div>
<div class="w3-display-bottomleft w3-container">Bottom
Left</div>
<div class="w3-display-bottomright w3-container">Bottom
Right</div>
<div class="w3-display-middle w3-large">Middle</div>
</div> Cobalah sendiri " Membangun Photo Album
Dalam contoh ini kita menggunakan W3.CSS sistem Responsif Grid untuk membuat album foto yang terlihat baik pada semua perangkat. Anda akan belajar lebih banyak tentang ini nanti.
musim panas 2015
5 Terre
Monterosso
Vernazza
Manarola
Corniglia
Riomaggiore
Contoh
<div class="w3-third">
<div class="w3-card-2">
<img src="img_monterosso.png" style="width:100%">
<div
class="w3-container">
<h4>Monterosso</h4>
</div>
</div>
</div>
Cobalah sendiri "