Skip to content
Related Articles

Related Articles

Improve Article

W3.CSS Effects

  • Last Updated : 02 Mar, 2021

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:

HTML




<!DOCTYPE html>
<html>
  
<head>
  
    <!-- Adding W3.CSS file through external link -->
    <link rel="stylesheet" href=
</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:

HTML




<!DOCTYPE html>
<html>
  
<head>
  
    <!-- Adding W3.CSS file through external link -->
    <link rel="stylesheet" href=
  
</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:

HTML




<!DOCTYPE html>
<html>
  
<head>
  
    <!-- Adding W3.CSS file through external link -->
    <link rel="stylesheet" href=
</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:




My Personal Notes arrow_drop_up
Recommended Articles
Page :