Latest web development tutorials
 

W3.CSS Images


Displaying Images

Rounded:

Northern Lights

Circle:

Forest

Bordered:

Mountains

Text:

Nature
Nature

Rounded Image

Norway

The w3-round class adds rounded corners to an image:

Example

<img src="img_fjords.jpg" class="w3-round" alt="Norway">
Try It Yourself »

Circled Image

Norway

The w3-circle class shapes an image to a circle:

Example

<img src="fjords.jpg" class="w3-circle" alt="Norway">
Try It Yourself »

Bordered Image

Norway

The w3-border class adds borders around the image:

Example

<img src="fjords.jpg" class="w3-border w3-padding" alt="Norway">
Try It Yourself »

Hoverable Image

Norway

The w3-hover-opacity class adds transparency to the image on mouse-over:

Example

<img src="fjords.jpg" class="w3-hover-opacity" alt="Norway">
Try It Yourself »

Image as a Card

Wrap any of the w3-card-* classes around the <img> element to display it as a card (add shadows):

Lights

Person

Simon

The boss of all bosses


Example

<div class="w3-card-4">
  <img src="img_avatar.png" alt="Person">
</div>
Try It Yourself »

Image Text

Position the text in an image with the w3-display-classes:

Lights

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 »