W3.CSS provides web developers with various effects. They can broadly be classified into three divisions. They are:
- Opacity
- Grayscale
- Sepia
Opacity Effects:
There are four opacity effect classes:
Sr. No. | Class Name | Description |
|---|---|---|
1. | w3-opacity-min | The opacity of the targeted element is set to 0.75. |
2. | w3-opacity | The opacity of the targeted element is set to 0.6. |
3. | w3-opacity-max | The opacity of the targeted element is set to 0.25. |
4. | w3-hover-opacity | The opacity of the targeted element is set to 0.6 on hover. |
Example:
<!DOCTYPE html>
<html>
<head>
<!-- Adding W3.CSS file through external link -->
<link rel="stylesheet" href=
"https://www.w3schools.com/w3css/4/w3.css">
</head>
<body>
<!-- w3-container is used to add
16px padding to any HTML element. -->
<!-- w3-center is used to set the
content of the element to the center. -->
<div class="w3-container w3-center">
<!-- w3-text-green sets the text
colour to green. -->
<!-- w3-xxlarge sets font size to 32px. -->
<h2 class="w3-text-green w3-xxlarge">
Welcome To GFG
</h2>
</div>
<!-- Images with Opacity Effects -->
<div class="w3-row w3-row-padding w3-center">
<!-- Minimum Opacity -->
<div class="w3-col m3 l3">
<img class="w3-image w3-opacity-min"
src="gfg.png">
<p>
<span class="w3-text-red">
Class
</span>
<br>
<span class="w3-text-blue">
w3-opacity-min
</span>
</p>
</div>
<!-- Normal Opacity -->
<div class="w3-col m3 l3">
<img class="w3-image w3-opacity"
src="gfg.png">
<p>
<span class="w3-text-red">
Class
</span>
<br>
<span class="w3-text-blue">
w3-opacity
</span>
</p>
</div>
<!-- Maximum Opacity -->
<div class="w3-col m3 l3">
<img class="w3-image w3-opacity-max"
src="gfg.png">
<p>
<span class="w3-text-red">
Class
</span>
<br>
<span class="w3-text-blue">
w3-opacity-max
</span>
</p>
</div>
<!-- On Hover Opacity -->
<div class="w3-col m3 l3">
<img class="w3-image w3-hover-opacity"
src="gfg.png">
<p>
<span class="w3-text-red">
Class
</span>
<br>
<span class="w3-text-blue">
w3-hover-opacity
</span>
</p>
</div>
</div>
</body>
</html>
Output:
Grayscale Effects: There are four grayscale effects classes:
Sr. No. | Class Name | Description |
|---|---|---|
1. | w3-grayscale-min | The grayscale of the targeted element is set to 50%. |
2. | w3-grayscale | The grayscale of the targeted element is set to 75%. |
3. | w3-grayscale-max | The grayscale of the targeted element is set to 100%. |
4. | w3-hover-grayscale | The grayscale of the targeted element is set to 100% on hover. |
Example:
<!DOCTYPE html>
<html>
<head>
<!-- Adding W3.CSS file through external link -->
<link rel="stylesheet" href=
"https://www.w3schools.com/w3css/4/w3.css">
</head>
<body>
<!-- w3-container is used to add
16px padding to any HTML element. -->
<!-- w3-center is used to set the
content of the element to the center. -->
<div class="w3-container w3-center">
<!-- w3-text-green sets the text
colour to green. -->
<!-- w3-xxlarge sets font size to 32px. -->
<h2 class="w3-text-green w3-xxlarge">
Welcome To GFG
</h2>
</div>
<!-- Images with Grayscale Effects -->
<div class="w3-row w3-row-padding w3-center">
<!-- Minimum Grayscale -->
<div class="w3-col m3 l3">
<img class="w3-image w3-grayscale-min"
src="gfg.png">
<p>
<span class="w3-text-red">Class</span>
<br>
<span class="w3-text-blue">
w3-grayscale-min
</span>
</p>
</div>
<!-- Normal Grayscale -->
<div class="w3-col m3 l3">
<img class="w3-image w3-grayscale"
src="gfg.png">
<p>
<span class="w3-text-red">Class</span>
<br>
<span class="w3-text-blue">
w3-grayscale
</span>
</p>
</div>
<!-- Maximum Grayscale -->
<div class="w3-col m3 l3">
<img class="w3-image w3-grayscale-max"
src="gfg.png">
<p>
<span class="w3-text-red">Class</span>
<br>
<span class="w3-text-blue">
w3-grayscale-max
</span>
</p>
</div>
<!-- On Hover Grayscale -->
<div class="w3-col m3 l3">
<img class="w3-image w3-hover-grayscale"
src="gfg.png">
<p>
<span class="w3-text-red">Class</span>
<br>
<span class="w3-text-blue">
w3-hover-grayscale
</span>
</p>
</div>
</div>
</body>
</html>
Output:
Sepia Effects: There are four sepia classes:
Sr. No. | Class Name | Description |
|---|---|---|
1. | w3-sepia-min | The sepia effect of the targeted element is set to 50%. |
2. | w3-sepia | The sepia effect of the targeted element is set to 75%. |
3. | w3-sepia-max | The sepia effect of the targeted element is set to 100%. |
4. | w3-hover-sepia | The sepia effect of the targeted element is set to 100% on hover. |
Example:
<!DOCTYPE html>
<html>
<head>
<!-- Adding W3.CSS file through external link -->
<link rel="stylesheet" href=
"https://www.w3schools.com/w3css/4/w3.css">
</head>
<body>
<!-- w3-container is used to add 16px
padding to any HTML element. -->
<!-- w3-center is used to set the content
of the element to the center. -->
<div class="w3-container w3-center">
<!-- w3-text-green sets the text
colour to green. -->
<!-- w3-xxlarge sets font size to 32px. -->
<h2 class="w3-text-green w3-xxlarge">
Welcome To GFG
</h2>
</div>
<!-- Images with Sepia Effects -->
<div class="w3-row w3-row-padding w3-center">
<!-- Minimum Sepia -->
<div class="w3-col m3 l3">
<img class="w3-image w3-sepia-min"
src="gfg.png">
<p>
<span class="w3-text-red">Class</span>
<br>
<span class="w3-text-blue">
w3-sepia-min
</span>
</p>
</div>
<!-- Normal Sepia -->
<div class="w3-col m3 l3">
<img class="w3-image w3-sepia"
src="gfg.png">
<p>
<span class="w3-text-red">Class</span>
<br>
<span class="w3-text-blue">
w3-sepia
</span>
</p>
</div>
<!-- Maximum Sepia -->
<div class="w3-col m3 l3">
<img class="w3-image w3-sepia-max"
src="gfg.png">
<p>
<span class="w3-text-red">Class</span>
<br>
<span class="w3-text-blue">
w3-sepia-max
</span>
</p>
</div>
<!-- On Hover Sepia -->
<div class="w3-col m3 l3">
<img class="w3-image w3-hover-sepia"
src="gfg.png">
<p>
<span class="w3-text-red">Class</span>
<br>
<span class="w3-text-blue">
w3-hover-sepia
</span>
</p>
</div>
</div>
</body>
</html>
Output:
