Wyświetlanie obrazów
Bułczasty:
Okrąg:
graniczy:
Tekst:
Natura
zaokrąglone Obraz
Klasa w3 cały dodaje zaokrąglone narożniki do obrazka:
krążył Obraz
Klasa w3-koło kształtów obrazu do kręgu:
graniczy Obraz
Klasa w3-border dodaje obramowania wokół obrazka:
Hoverable Obraz
Klasa w3-hover krycie dodaje przejrzystość obrazu na mouse-over:
Obraz jak karta
Owiń którykolwiek z W3-kartonu * klas wokół elementu <img>, aby wyświetlić go jako karty (dodawanie cieni):
Szymon, Szymek
Szef wszystkich szefów
Tekst Obraz
Umieścić tekst w obrazie z klas W3-display-:
Lewy górny
W prawym górnym rogu
Na dole po lewej
Prawy dolny
Środkowy
Przykład
<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> Spróbuj sam " Konstruowanie album fotograficzny
W tym przykładzie używamy systemu Responsive Siatka W3.CSS stworzyć album fotograficzny, który wygląda dobrze na wszystkich urządzeniach. Dowiesz się więcej o tym później.
Lato 2015
5 Terre
Monterosso
Vernazza
Manarola
Corniglia
Riomaggiore
Przykład
<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>
Spróbuj sam "