W3CSS Effects

In this article we are going to study some of the most fancy W3CSS effects that you can add to your images. These W3CSS effects include opacity effects, grayscale effects sepia effects and hover effects. It is extremely difficult to create these effects without W3CSS and would require lots of extensive JavaScript coding. Though we studied some of these effects in image article, it is important that we dedicate a separate section to it.

Adding Opacity to Images

Often times you need to add opacity to the image to create a certain effect. W3CSS uses w3-opacity, w3-opacity-min and w3-opacity-max classes to add opacity to an image. Take a look a the following example where these three types of opacities have been added to an image.

<!doctype html>
<html>

<head>

<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://www.w3schools.com/lib/w3.css">
    
</head>
    
<body>
    
 <img src="http://images.freeimages.com/images/previews/d39/machinegun-1313031.jpg" alt="gun" >
    
    <img src="http://images.freeimages.com/images/previews/d39/machinegun-1313031.jpg" alt="gun"
         class="w3-opacity-min" >

        <img src="http://images.freeimages.com/images/previews/d39/machinegun-1313031.jpg" alt="gun"
         class="w3-opacity" >
    
        <img src="http://images.freeimages.com/images/previews/d39/machinegun-1313031.jpg" alt="gun"
         class="w3-opacity-max" >
</body>
    
</html>

Download the code Try the code

Creating Grayscale Images

Often times you need to create grayscale images. W3CSS uses w3-grayscale, w3-grayscale-min and w3-grayscale-max classes to create grayscale images. Take a look a the following example where these three types of grayscale images have been created

<!doctype html>
<html>

<head>

<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://www.w3schools.com/lib/w3.css">
    
</head>
    
<body>
    
 <img src="http://images.freeimages.com/images/previews/d39/machinegun-1313031.jpg" alt="gun" >
    
    <img src="http://images.freeimages.com/images/previews/d39/machinegun-1313031.jpg" alt="gun"
         class="w3-grayscale-min" >

        <img src="http://images.freeimages.com/images/previews/d39/machinegun-1313031.jpg" alt="gun"
         class="w3-grayscale" >
    
        <img src="http://images.freeimages.com/images/previews/d39/machinegun-1313031.jpg" alt="gun"
         class="w3-grayscale-max" >
</body>
    
</html>

Download the code Try the code

Creating Sepia Image Effect

W3CSS uses w3-sepia, w3-sepia-min and w3-sepia-max classes to create sepia image effect. Take a look a the following example where these three types of sepia image effects have been created

<!doctype html>
<html>

<head>

<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://www.w3schools.com/lib/w3.css">
    
</head>
    
<body>
    
 <img src="http://images.freeimages.com/images/previews/d39/machinegun-1313031.jpg" alt="gun" >
    
    <img src="http://images.freeimages.com/images/previews/d39/machinegun-1313031.jpg" alt="gun"
         class="w3-sepia-min" >

        <img src="http://images.freeimages.com/images/previews/d39/machinegun-1313031.jpg" alt="gun"
         class="w3-sepia" >
    
        <img src="http://images.freeimages.com/images/previews/d39/machinegun-1313031.jpg" alt="gun"
         class="w3-sepia-max" >
</body>
    
</html>

Download the code Try the code

If you open the above page in browser, you will see four images. The first image is normal image, the second image has minimal sepia effect, the next image has higher sepia effect while the fourth image has maximum sepia effect

Creating Hover Effects

You can also create opacity, grayscale and sepia effect on images when mouse is hovered over the image. To do so, add w3-hover-opacity, w3-hover-grayscale or w3-hover-sepia classes respectively to the images. Take a look at the following code.

<!doctype html>
<html>

<head>

<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://www.w3schools.com/lib/w3.css">
    
</head>
    
<body>
    
    
    <img src="http://images.freeimages.com/images/previews/d39/machinegun-1313031.jpg" alt="gun"
         class="w3-hover-opacity" >

        <img src="http://images.freeimages.com/images/previews/d39/machinegun-1313031.jpg" alt="gun"
         class="w3-hover-grayscale" >
    
        <img src="http://images.freeimages.com/images/previews/d39/machinegun-1313031.jpg" alt="gun"
         class="w3-hover-sepia" >
</body>
    
</html>

Download the code Try the code

Copyright 2005-2016 KnowledgeHills. Privacy Policy. Contact .