Open In App

W3.CSS Effects

Last Updated : 02 Mar, 2021
Improve
Improve
Like Article
Like
Save
Share
Report

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=
        "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:




HTML














                                    




                                    

                                    




                                    




                                    

                                    

                                    
                                




















<!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:




HTML














                                    




                                    

                                    




                                    




                                    

                                    

                                    
                                




















<!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:




                                 


                            

                                

                                    Like Article
                                    
                                

                                

                                    
                                    

                                        
                                        Suggest improvement
                                    

                                

                            


                            

                            
 
                                

                                    
                                        Next
                                        
                                    
                                    
                                    

                                        W3.CSS Tags
                                    

                                

                                                        

                            
    

        

            Share your thoughts in the comments
        

        
    
                            

            

                

                    

                    
                
 
                
    
                            

                                

                            


                            


            

        
 
                        

                                                

                        
                                                    

                                

                                    Similar Reads                                    
                                

                                
      
                                    
        
            

                CSS | Text Effects
            

        
    
        
            

                How to create mousemove parallax effects using HTML CSS & Javascript ?
            

        
    
        
            

                Tailwind CSS Effects Complete Reference
            

        
    
        
            

                How to use Animation and Transition Effects in CSS ?
            

        
    
        
            

                Create a Photo Filters and Effects Project using HTML CSS & JavaScript
            

        
    
        
            

                How to create image overlay hover slide effects using CSS ?
            

        
    
        
            

                How To Add Blur Effects to Images in CSS ?
            

        
    
        
            

                What are the methods used to provide effects in jQuery ?
            

        
    
        
            

                SVG Blur Effects
            

        
    
        
            

                How to prevent sticky hover effects for buttons on touch devices ?
            

        
                                    

                            

                                                                        

                                

                                    
                                                                    

                            


                        

                        

                            

                                

                                    

                                        
author
        

            
        

        

                                    


                                    

                                        aditya_taparia                                

                            

                            

            
                                

                            

                                                                    

                                        
Article Tags : 

                                        
                                    

                                                                                            

                                                                                    

                              

                            

                                                        
                        

                    

                

            

        
        


        

                


			
		
		                
        

    

    

        

            

            

        

    












	

    
  

  
  








    
        We use cookies to ensure you have the best browsing experience on our website. By using our site, you
        acknowledge that you have read and understood our
        Cookie Policy &
        Privacy Policy
            
    







   Lightbox