Image Filter
Image filters such as grayscale, sepia, opacity, and blur using only an image-[filter]-[number] class. Note: The filter property is not supported in Internet Explorer, Edge 12, or Safari 5.1 and earlier. May only work with image 'src'. Note that the image-grayscale-90-hover-none class has been observed to clip content further down on long pages. experimental
image-grayscale-[number]
image-grayscale-90
image-grayscale-75
image-grayscale-50
image-grayscale-25
<img src="../image/fpo.jpg" class="image-grayscale-25" />
Use the image-grayscale-[number] class on an <img /> or <div> tag.
image-grayscale-[number]-hover
image-grayscale-90-hover
image-grayscale-75-hover
image-grayscale-50-hover
image-grayscale-25-hover
<img src="../image/fpo.jpg" class="image-grayscale-25-hover" />
Use the image-grayscale-[number]-hover class on an <img /> or <div> tag.
image-grayscale-[number]-hover-none
image-grayscale-90-hover-none
image-grayscale-75-hover-none
image-grayscale-50-hover-none
image-grayscale-25-hover-none
<img src="../image/fpo.jpg" class="image-grayscale-25-hover-none" />
Use the image-grayscale-[number]-hover-none class on an <img /> or <div> tag.
image-sepia-[number]
image-sepia-90
image-sepia-75
image-sepia-50
image-sepia-25
<img src="../image/fpo.jpg" class="image-sepia-25" />
Use the image-sepia-[number] class on an <img /> or <div> tag.
image-sepia-[number]-hover
image-sepia-90-hover
image-sepia-75-hover
image-sepia-50-hover
image-sepia-25-hover
<img src="../image/fpo.jpg" class="image-sepia-25-hover" />
Use the image-sepia-[number]-hover class on an <img /> or <div> tag.
image-sepia-[number]-hover-none
image-sepia-90-hover-none
image-sepia-75-hover-none
image-sepia-50-hover-none
image-sepia-25-hover-none
<img src="../image/fpo.jpg" class="image-sepia-25-hover-none" />
Use the image-sepia-[number]-hover-none class on an <img /> or <div> tag.
image-opacity-[number]
image-opacity-90
image-opacity-75
image-opacity-50
image-opacity-25
<img src="../image/fpo.jpg" class="image-opacity-25" />
Use the image-opacity-[number] class on an <img /> or <div> tag.
image-opacity-[number]-hover
image-opacity-90-hover
image-opacity-75-hover
image-opacity-50-hover
image-opacity-25-hover
<img src="../image/fpo.jpg" class="image-opacity-25-hover" />
Use the image-opacity-[number]-hover class on an <img /> or <div> tag.
image-opacity-[number]-hover-none
image-opacity-90-hover-none
image-opacity-75-hover-none
image-opacity-50-hover-none
image-opacity-25-hover-none
<img src="../image/fpo.jpg" class="image-opacity-25-hover-none" />
Use the image-opacity-[number]-hover-none class on an <img /> or <div> tag.
image-blur-[number]
image-blur-15
image-blur-10
image-blur-5
image-blur-3
<img src="../image/fpo.jpg" class="image-blur-3" />
Use the image-blur-[number] class on an <img /> or <div> tag.
image-blur-[number]-hover
image-blur-15-hover
image-blur-10-hover
image-blur-5-hover
image-blur-3-hover
<img src="../image/fpo.jpg" class="image-blur-3-hover" />
Use the image-blur-[number]-hover class on an <img /> or <div> tag.
image-blur-[number]-hover-none
image-blur-15-hover-none
image-blur-10-hover-none
image-blur-5-hover-none
image-blur-3-hover-none
<img src="../image/fpo.jpg" class="image-blur-3-hover-none" />
Use the image-blur-[number]-hover-none class on an <img /> or <div> tag.