HTML tutorial
CSS3 tutorial
Bootstrap tutorial
JavaScript tutorial
JQuery tutorial
AngularJS tutorial
React tutorial
NodeJS tutorial
PHP tutorial
Python tutorial
Python3 tutorial
Django tutorial
Linux tutorial
Docker tutorial
Ruby tutorial
Java tutorial
C tutorial
C ++ tutorial
Perl tutorial
JSP tutorial
Lua tutorial
Scala tutorial
Go tutorial
ASP.NET tutorial
C # tutorial
Normal
W3.CSS provides the following effects classes:
Class | Defines |
---|---|
w3-opacity | Adds opacity/transparency to an element (opacity: 0.6) |
w3-opacity-min | Adds opacity/transparency to an element (opacity: 0.75) |
w3-opacity-max | Adds opacity/transparency to an element (opacity: 0.25) |
w3-grayscale | Adds a grayscale effect to an element (grayscale: 75%) |
w3-grayscale-min | Adds a grayscale effect to an element (grayscale: 50%) |
w3-grayscale-max | Adds a grayscale effect to an element (grayscale: 100%) |
w3-sepia | Adds a sepia effect to an element (sepia: 75%) |
w3-sepia-min | Adds a sepia effect to an element (sepia: 50%) |
w3-sepia-max | Adds a sepia effect to an element (sepia: 100%) |
w3-hover-opacity | Adds transparency to an element on hover (opacity: 0.6) |
w3-hover-grayscale | Adds a grayscale effect to an element on hover (grayscale: 100%) |
w3-hover-sepia | Adds a sepia effect to an element on hover |
The w3-opacity classes add transparency to an element:
Normal
w3-opacity-min
w3-opacity
w3-opacity-max
<img src="image.jpg" class="w3-opacity-min">
<img src="image.jpg" class="w3-opacity">
<img src="image.jpg" class="w3-opacity-max">
The w3-grayscale classes add a grayscale effect to an element:
Normal
w3-grayscale-min
w3-grayscale
w3-grayscale-max
<img src="image.jpg" class="w3-grayscale-min">
<img src="image.jpg" class="w3-grayscale">
<img src="image.jpg" class="w3-grayscale-max">
Note: The w3-grayscale classes are not supported in IE 11 and earlier versions.
The w3-sepia classes add a sepia effect to an element:
Normal
w3-sepia-min
w3-sepia
w3-sepia-max
<img src="image.jpg" class="w3-sepia-min">
<img src="image.jpg" class="w3-sepia">
<img src="image.jpg" class="w3-sepia-max">
Note: The w3-sepia classes are not supported in IE 11 and earlier versions.
You can also add special effects on hover/mouse-over.
w3-hover-opacity
w3-hover-grayscale
w3-hover-sepia
<img src="image.jpg" class="w3-hover-opacity">
<img src="image.jpg" class="w3-hover-grayscale">
<img src="image.jpg" class="w3-hover-sepia">
You can also combine any w3-hover-color classes with w3-hover-opacity to create a slightly "lighter" background color on hover:
w3-hover-red
w3-hover-red with w3-hover-opacity
<div class="w3-border w3-hover-opacity w3-hover-red">
<p>w3-hover-red with w3-hover-opacity</p>
</div>