W3.CSS Images
Displaying Images
Rounded:
Circle:
Bordered:
Text:
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:
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
Responsive Images
An image can be set to automatically resize itself to fit the size of its container.
All you have to do is set the image width to 100%:
Example
<div class="w3-container">
<img src="img_lights.jpg"
alt="Lights" style="width:100%">
</div>
Try It Yourself »
If you want to restrict a responsive image to a maximum size, use the max-width property:
Example
<div class="w3-container">
<img src="img_lights.jpg"
alt="Lights" style="width:100%;max-width:400px">
</div>
Try It Yourself »
Image Text
Position the text in an image with the w3-display-classes:
Top Left
Top Right
Bottom Left
Bottom Right
You can also center text at the top or at the bottom of an image:
Top Middle
Bottom 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 »
Opacity
The w3-opacity class makes images transparent:
Normal
With class="w3-opacity"
The default opacity is 0.6. This can be changed to any value between 0 and 1:
Example
<img src="img_forest.jpg" alt="Forest" class="w3-opacity"
style="opacity:0.2">
Try It Yourself »
Opacity 0.2
class="w3-opacity"
Opacity 0.8
Hoverable Image
Add transparency on hover:
Remove transparency on hover:
The w3-hover-opacity class adds transparency to the image on mouse-over, and the w3-hover-opacity-off class removes transparency on mouse-over.
Example
<img src="fjords.jpg" class="w3-hover-opacity" alt="Norway">
<img src="fjords.jpg" class="w3-opacity w3-hover-opacity-off" alt="Norway">
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.jpg" style="width:100%">
<div
class="w3-container">
<h4>Monterosso</h4>
</div>
</div>
</div>
Try It Yourself »
