Affichage des images
arrondi:
Cercle:
Bordé:
Texte:
Photo Rounded
La classe w3-ronde ajoute coins arrondis à une image:
image Cerclé
La classe w3-cercle façonne une image à un cercle:
bordé image
La classe w3-frontière ajoute les frontières autour de l'image:
image Hoverable
La classe w3-hover-opacité ajoute de la transparence à l'image sur la souris sur:
Image comme une carte
Envelopper l' un des w3-card- * des classes autour de l'élément <img> pour l' afficher comme une carte (ajouter des ombres):
Simon
Le patron de tous les patrons
image Text
Placez le texte dans une image avec les classes w3-Display-:
En haut à gauche
En haut à droite
En bas à gauche
En bas à droite
Exemple
<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> Try It Yourself » Construire un album photo
Dans cet exemple, nous utilisons le système de grille Responsive W3.CSS pour créer un album photo qui ressemble bien sur tous les appareils. Vous en apprendrez plus à ce sujet plus tard.
été 2015
5 Terre
Monterosso
Vernazza
Manarola
Corniglia
Riomaggiore
Exemple
<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>
Try It Yourself »