THE WORLD'S LARGEST WEB DEVELOPER SITE
HTMLCSSJAVASCRIPTSQLPHPBOOTSTRAPJQUERYANGULARXML
 

W3.CSS Images


Displaying Images

Rounded Corners:

Cinque Terre

Circle:

Cinque Terre

Bordered:

Cinque Terre

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 »

Another Card Example


Avatar
example@email.com

Forgot password?

Example

<div class="w3-card-4 w3-light-grey">

<div class="w3-container w3-center">
  <img src="img_avatar4.png" alt="Avatar" class="w3-circle">
  <h5>example@email.com</h5>

  <input class="w3-input w3-border" type="text" placeholder="Password">
  <button class="w3-btn w3-btn-block w3-green">Login</button>
  <a href="#" class="w3-left w3-text-green">Forgot password?</a>
</div>

</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 »