W3.CSS Images:

Images are another important HTML element that can be greatly designed by using the classes of W3.CSS:

Using classes w3-round and w3-circle:

<div class="w3-panel">
  <img src="penguins.jpg" class="w3-round">
  <img src="penguins.jpg" class="w3-circle">
</div>

w3-round creates a moderate rounded corners. We can extend this round by adding -large, -xlarge, -xxlarge etc. w3-circle creates oval if the image is wide. If it is perfect square, the circle will also be perfect.
Output:

A combination of w3-border and w3-padding creates border around the image. w3-card-4 designs the image like a card:

<div class="w3-panel">
  <img src="penguins.jpg" class="w3-border w3-padding">
  <img src="penguins.jpg" class="w3-card-4">
</div>

w3-padding can be extended as –small, -large, -xlarge to create more or less gap between the image and its border. w3-card-4 can also be extended as –card, -card-2 and –card-4.
Output:

The following combination of w3-display classes allows text to appear on the image:

<div class="w3-display-container w3-text-white">
  <img src="desert.jpg" class="w3-card-4" style="width:100%;">
  <div class="w3-display-topleft w3-container"><b>India1</b></div>
  <div class="w3-display-topmiddle w3-container"><b>India2</b></div>
  <div class="w3-display-topright w3-container"><b>India3</b></div>
  <div class="w3-display-left w3-container"><b>India4</b></div>
  <div class="w3-display-middle w3-container"><b>India5</b></div>
  <div class="w3-display-right w3-container"><b>India6</b></div>
</div>

Three more classes- w3-display-bottomleft, w3-display-bottommiddle and w3-display-bottomright can be used to position text on bottom of the image.
Output:

Responsiveness can be applied to an image by following three methods

A class w3-image allows image to scale down but not to scale up more than its original scale.
A property max-width:**px allows image to scale down but not to scale up more than a specific scale.
A property width:100% allows image to scale down and scale up simultaneously.

The variations in w3-opacity can add different levels of transparency:

<div class="w3-panel">
  <img src="penguins.jpg">
  <img src="penguins.jpg" class="w3-opacity-min">
  <img src="penguins.jpg" class="w3-opacity">
  <img src="penguins.jpg" class="w3-opacity-max">
</div>

The first image has no opacity. But next three images have increasing levels of opacity.
Output:

The variations in w3-grayscale can add different levels of gray-scale effect:

<div class="w3-panel">
  <img src="penguins.jpg">
  <img src="penguins.jpg" class="w3-grayscale-min">
  <img src="penguins.jpg" class="w3-grayscale">
  <img src="penguins.jpg" class="w3-grayscale-max">
</div>

The first image has no gray-scale. But next three images have increasing levels of gray-scale.
Output:

The variations in w3-sepia can add different levels of sepia effect:

<div class="w3-panel">
  <img src="penguins.jpg">
  <img src="penguins.jpg" class="w3-sepia-min">
  <img src="penguins.jpg" class="w3-sepia">
  <img src="penguins.jpg" class="w3-sepia-max">
</div>

The first image has no sepia. But next three images have increasing levels of sepia effect
Output:

A simple class w3-hover-effect can be used to add hover of different effects Like- w3-hover-opacity, w3-hover-grayscale, and w3-hover-sepia

A simple class w3-hover-opacity-off can be used to remove opacity effect on hover.

<img src="penguins.jpg" class="w3-opacity w3-hover-opacity-off">

This code will first add a medium opacity level and then remove that opacity on hover:

NOTE: The class w3-hover-effect-off doesn't work with grayscale and sepia effects. It works only with opacity. Also in the class w3-hover-effect, we cannot use -min and -max extensions.