Efekty W3.CSS


Normální

w3-opacity

w3-stupně šedi-max

w3-sépie-max


Třídy efektů W3.CSS

W3.CSS poskytuje následující třídy efektů:

Třída Definuje
w3-opacity Přidá neprůhlednost/průhlednost prvku (neprůhlednost: 0,6)
w3-opacity-min Přidá neprůhlednost/průhlednost prvku (neprůhlednost: 0,75)
w3-opacity-max Přidá neprůhlednost/průhlednost prvku (neprůhlednost: 0,25)
w3 ve stupních šedi Přidá k prvku efekt stupňů šedi (stupně šedi: 75 %)
w3-stupně šedi-min Přidá k prvku efekt stupňů šedi (stupně šedi: 50 %)
w3-stupně šedi-max Přidá k prvku efekt stupňů šedi (stupně šedi: 100 %)
w3-sépie 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">


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

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

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

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>