W3.CSS Effects
W3.CSS Effect Classes
W3.CSS provides classes for opacity, grayscale, sepia, and hover effects.
These effects can be applied to images and other HTML elements.
w3-grayscale
Normal
w3-opacity
w3-sepia
| Class | Defines |
|---|---|
w3-opacity |
Adds opacity to an element |
w3-opacity-min |
Adds a small amount of opacity |
w3-opacity-max |
Adds a large amount of opacity |
w3-grayscale |
Adds a grayscale effect |
w3-grayscale-min |
Adds a small grayscale effect |
w3-grayscale-max |
Adds a full grayscale effect |
w3-sepia |
Adds a sepia effect |
w3-sepia-min |
Adds a small sepia effect |
w3-sepia-max |
Adds a full sepia effect |
w3-hover-opacity |
Adds opacity on hover |
w3-hover-grayscale |
Adds grayscale on hover |
w3-hover-sepia |
Adds sepia on hover |
Opacity
The w3-opacity classes add transparency to an element:
Normal
w3-opacity-min
w3-opacity
w3-opacity-max
Example
<img src="image.jpg" class="w3-opacity-min">
<img src="image.jpg" class="w3-opacity">
<img src="image.jpg" class="w3-opacity-max">
Try It Yourself »
Grayscale
The w3-grayscale classes add a grayscale effect to an element:
Normal
w3-grayscale-min
w3-grayscale
w3-grayscale-max
Example
<img src="image.jpg" class="w3-grayscale-min">
<img src="image.jpg" class="w3-grayscale">
<img src="image.jpg" class="w3-grayscale-max">
Try It Yourself »
Sepia
The w3-sepia classes add a sepia effect to an element:
Normal
w3-sepia-min
w3-sepia
w3-sepia-max
Example
<img src="image.jpg" class="w3-sepia-min">
<img src="image.jpg" class="w3-sepia">
<img src="image.jpg" class="w3-sepia-max">
Try It Yourself »
Hover Effects
W3.CSS can also apply effects when the user moves the mouse over an element.
Hover over (mouse over) the images to see the effect.
w3-hover-opacity
w3-hover-grayscale
w3-hover-sepia
Example
<img src="image.jpg" class="w3-hover-opacity">
<img src="image.jpg" class="w3-hover-grayscale">
<img src="image.jpg" class="w3-hover-sepia">
Try It Yourself »
Hover Opacity with Color
Combine a w3-hover-color class with w3-hover-opacity to create a lighter hover color:
w3-hover-red
w3-hover-red with w3-hover-opacity
Example
<div class="w3-border w3-hover-opacity w3-hover-red">
<p>w3-hover-red with w3-hover-opacity</p>
</div>
Try It Yourself »
