Visualizzazione immagini
Rounded:
Cerchio:
delimitato:
Testo:
Immagine arrotondato
La classe w3-rotonda aggiunge angoli arrotondati per un'immagine:
Immagine cerchiato
La classe w3-forme cerchio un'immagine di un cerchio:
Immagine delimitata
La classe w3-border aggiunge bordi intorno all'immagine:
Immagine Hoverable
La classe w3-hover-opacità aggiunge la trasparenza all'immagine al passaggio del mouse:
Immagine come una scheda
Avvolgere una delle classi W3-carta- * in tutto l'elemento <img> per visualizzarla come una carta (aggiungere ombre):
Simon
Il boss di tutti i boss
immagine Testo
Posizionare il testo in un'immagine con le classi W3-display-:
A sinistra in alto
In alto a destra
In basso a sinistra
In basso a destra
Esempio
<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> Prova tu stesso " Costruire un album fotografico
In questo esempio utilizziamo il sistema griglia Responsive W3.CSS per creare un album fotografico che guarda bene su tutti i dispositivi. Potrete saperne di più su questo più tardi.
Estate 2015
5 Terre
Monterosso
Vernazza
Manarola
Corniglia
Riomaggiore
Esempio
<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>
Prova tu stesso "