Displaying Images
Rounded:
Circle:
Bordered:
Text:
Nature
Rounded Image
The w3-round class adds rounded corners to an image:
Circled Image
The w3-circle class shapes an image to a circle:
Bordered Image
The w3-border class adds borders around the image:
Hoverable Image
The w3-hover-opacity class adds transparency to the image on mouse-over:
Image as a Card
Wrap any of the w3-card-* classes around the <img> element to display it as a card (add shadows):
Simon
The boss of all bosses
Image Text
Position the text in an image with the w3-display-classes:
Top Left
Top Right
Bottom Left
Bottom Right
Middle
Example
<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 »
Constructing a Photo Album
In this example we use the W3.CSS Responsive Grid system to create a photo album that looks good on all devices. You will learn more about this later.
Summer 2015
5 Terre
Monterosso
Vernazza
Manarola
Corniglia
Riomaggiore
Example
<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 »