W3.CSS Images
Displaying Images
Rounded:
![Northern Lights](img_lights.jpg)
Circle:
![Forest](img_forest.jpg)
Bordered:
![Mountains](img_mountains.jpg)
Text:
![Nature](img_nature.jpg)
Rounded Image
![Norway](img_fjords.jpg)
The w3-round class adds rounded corners to an image:
Circled Image
![Norway](img_fjords.jpg)
The w3-circle class shapes an image to a circle:
Bordered Image
![Norway](img_fjords.jpg)
The w3-border class adds borders around the image:
Hoverable Image
![Norway](img_fjords.jpg)
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):
![Lights](img_lights.jpg)
![Person](img_avatar3.png)
Simon
The boss of all bosses
Image Text
Position the text in an image with the w3-display-classes:
![Lights](img_lights.jpg)
Top Left
Top Right
Bottom Left
Bottom Right
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
![](img_5terre.png)
5 Terre
![](img_monterosso.png)
Monterosso
![](img_vernazza.png)
Vernazza
![](img_manarola.png.jpeg)
Manarola
![](img_corniglia.png)
Corniglia
![](img_riomaggiore.png)
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 »