W3.CSS Effects






<!--
main_leaderboard, all: [728,90][970,90][320,50][468,60]
-->



W3.CSS Effects



❮ Previous
Next ❯





Normal







w3-opacity







w3-grayscale-max







w3-sepia-max









W3.CSS Effect Classes


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


Opacity


The w3-opacity classes add transparency to an element:






Normal







w3-opacity-min







w3-opacity







w3-opacity-max










Example



<img src="image.jpg" class="w3-opacity-min">

<img src="image.jpg" class="w3-opacity">

<img src="image.jpg" class="w3-opacity-max">

Try It Yourself »





<!--
mid_content, all: [300,250][336,280][728,90][970,250][970,90][320,50][468,60]
-->




Grayscale


The w3-grayscale classes add a grayscale effect to an element:






Normal







w3-grayscale-min







w3-grayscale







w3-grayscale-max










Example



<img src="image.jpg" class="w3-grayscale-min">

<img src="image.jpg" class="w3-grayscale">

<img src="image.jpg" class="w3-grayscale-max">

Try It Yourself »



Note: The w3-grayscale classes are not supported in IE 11
and earlier versions.




Sepia


The w3-sepia classes add a sepia effect to an element:






Normal







w3-sepia-min







w3-sepia







w3-sepia-max










Example



<img src="image.jpg" class="w3-sepia-min">

<img src="image.jpg" class="w3-sepia">

<img src="image.jpg" class="w3-sepia-max">

Try It Yourself »



Note: The w3-sepia classes are not supported in IE 11 and
earlier versions.




Hover Effects


You can also add special effects on hover/mouse-over.





Norway

w3-hover-opacity






Norway

w3-hover-grayscale







Norway

w3-hover-sepia








Example



<img src="image.jpg" class="w3-hover-opacity">
<img src="image.jpg" class="w3-hover-grayscale">
<img src="image.jpg" class="w3-hover-sepia">


Try It Yourself »


Hover Opacity Color


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





Example



<div class="w3-border w3-hover-opacity w3-hover-red">
  <p>w3-hover-red with w3-hover-opacity</p>
</div>


Try It Yourself »




❮ Previous
Next ❯

-

Popular posts from this blog

Colors HSL

googletag.cmd.push(function() { googletag.display('div-gpt-ad-1422003450156-2'); }); Colors HSL ❮ Previous Next ❯ HSL Calculator   rgb(255, 0, 0) #ff0000 H: S: L: HSL Colors HSL color values are supported in IE9+, Firefox, Chrome, Safari, and in Opera 10+. HSL stands for hue, saturation, and lightness. HSL color values are specified with: hsl( hue , saturation , lightness ) . Hue Hue is a degree on the color wheel from 0 to 360. 0 is red, 120 is green, 240 is blue. Saturation Saturation is a percentage value; 0% means a shade of gray and 100% is the full color. Lightness Lightness is also a percentage; 0% is black, 100% is white. function submitOnEnter(e) { keyboardKey = e.which || e.keyCode; if (keyboardKey == 13) { setFullColor(); } } function clickHue(hue) { var h = document.getElementById("hue01"); h.v...
Read more

W3.CSS Downloads

<!-- main_leaderboard, all: [728,90][970,90][320,50][468,60] --> W3.CSS Downloads ❮ Previous Next ❯ Download W3.CSS Download W3.CSS from this link: https://www.w3schools.com/w3css/4/w3.css W3.CSS is Free W3.CSS is free to use. No license is necessary. How To use W3.CSS To use W3.CSS, just add a link to "w3.css" in your web pages: Example <!DOCTYPE html> <html> <title>My Web</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css"> Try It Yourself » Or download w3.css and run it from your own web site: Example <!DOCTYPE html> <html> <title>My Web</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="w3.css"> If you put w3....
Read more

W3.CSS Tables

<!-- main_leaderboard, all: [728,90][970,90][320,50][468,60] --> W3.CSS Tables ❮ Previous Next ❯ First Name Last Name Points Jill Smith 50 Eve Jackson 94 Adam Johnson 67 Bo Nilsson 50 Mike Ross 35 W3.CSS Table Classes W3.CSS provides the following classes for tables: Class Defines w3-table Container for an HTML table w3-striped Striped table w3-border Bordered table w3-bordered Bordered lines w3-centered Centered table content w3-hoverable Hoverable table w3-table-all All properties set Basic Table The w3-table class is used to display a basic table: First Name Last Name Points Jill Smith 50 Eve Jackson 94 Adam Johnson 67 Example <table class="w3-table"> <tr>   <th>First Name</th>   <th>Last Name</th>   <th>Points</th> </tr> <tr>   <td>Jill</td>   <td>Smith</td>   <td>50</...
Read more