Labels

CSS Image Filters

We will use CSS filter property for applying filters to images. It changes the opacity, color, saturation etc. of the images.

Image Filters

This example use filter property to add visual effects (like blur and saturation) to an element.

Note: The filter property is not supported in Internet Explorer or Edge 12.

Image Filters

Note: The filter property is not supported in Internet Explorer or Edge 12.

Road
Normal Image
Road
Blur Image
Road
Brightness Changed Image
Road
Contrast Changed Image
Road
Grayscale Image
Road
Hue rotated Image
Road
Inverted Color Image
Road
Opacity Changed Image
Road
Saturation Changed Image
Road
Sepia Image
Road
Shadow Added Image

Example

<!DOCTYPE html>
<html>
<head>
<style>
body {
background-color:white;
}
img {
object-fit: cover;
width: 100%;
height: 100%;
}

.img_holder {
position: relative;
float: left;
margin: 5px;
max-width: 230px;
height: 235px;
}

.img_c_holder {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
padding: 5px 0;
font-size: 14px;
font-weight: bold;
text-align: center;
color: #fff;
background: rgba(0,0,255,0.5);
}

.blur {filter: blur(4px);}
.brightness {filter: brightness(250%);}
.contrast {filter: contrast(180%);}
.grayscale {filter: grayscale(100%);}
.huerotate {filter: hue-rotate(180deg);}
.invert {filter: invert(100%);}
.opacity {filter: opacity(50%);}
.saturate {filter: saturate(7);}
.sepia {filter: sepia(100%);}
.shadow {filter: drop-shadow(8px 8px 10px blue);}
</style>
</head>
<body>

<div class="img_holder">
<img src="img_road.jpg" alt="Road" width="300" height="300"/>
<div class="img_c_holder">
Normal Image
</div>
</div>

<div class="img_holder">
<img class="blur" src="img_road.jpg" alt="Road" width="300" height="300"/>
<div class="img_c_holder">
Blur Image
</div>
</div>

<div class="img_holder">
<img class="brightness" src="img_road.jpg" alt="Road" width="300" height="300"/>
<div class="img_c_holder">
Brightness Changed Image
</div>
</div>

<div class="img_holder">
<img class="contrast" src="img_road.jpg" alt="Road" width="300" height="300"/>
<div class="img_c_holder">
Contrast Changed Image
</div>
</div>

<div class="img_holder">
<img class="grayscale" src="img_road.jpg" alt="Road" width="300" height="300"/>
<div class="img_c_holder">
Grayscale Image
</div>
</div>

<div class="img_holder">
<img class="huerotate" src="img_road.jpg" alt="Road" width="300" height="300"/>
<div class="img_c_holder">
Hue rotated Image
</div>
</div>

<div class="img_holder">
<img class="invert" src="img_road.jpg" alt="Road" width="300" height="300"/>
<div class="img_c_holder">
Inverted Color Image
</div>
</div>

<div class="img_holder">
<img class="opacity" src="img_road.jpg" alt="Road" width="300" height="300"/>
<div class="img_c_holder">
Opacity Changed Image
</div>
</div>

<div class="img_holder">
<img class="saturate" src="img_road.jpg" alt="Road" width="300" height="300"/>
<div class="img_c_holder">
Saturation Changed Image
</div>
</div>

<div class="img_holder">
<img class="sepia" src="img_road.jpg" alt="Road" width="300" height="300"/>
<div class="img_c_holder">
Sepia Image
</div>
</div>

<div class="img_holder">
<img class="shadow" src="img_road.jpg" alt="Road" width="300" height="300"/>
<div class="img_c_holder">
Shadow Added Image
</div>
</div>
</body>
</html>

Example Explained

  • .blur {filter: blur(4px);} - This blurs the image. It takes the amount to blur as its parameter.
  • .brightness {filter: brightness(250%);} - This changes the brightness of image. It increase the brightness of image by 250%.
  • .contrast {filter: contrast(180%);} - This changes the contrast of image. It increase the contrast of image by 180%.
  • .grayscale {filter: grayscale(100%);} - This changes the color of image i.e. It changes a colored image into a grayscale one. It makes image grayscale by 100%.
  • .huerotate {filter: hue-rotate(180deg);} - This changes the color scheme of image i.e. It changes a colored image into a another colored one. It changes image color to new one that is the color obtained by rotating hue.
  • .invert {filter: invert(100%);} - This changes the color scheme of image i.e. It changes a colored image into a another colored one. It changes image color to new one that is the color obtained by inverting it.
  • .opacity {filter: opacity(50%);} - This changes the opacity of image i.e. It changes a opaque image into a transparent one. It changes image opacity to 50%.
  • .saturate {filter: saturate(7);} - This changes the saturation of image. It changes image saturation to 7.
  • .sepia {filter: sepia(100%);} - This applies the sepia color scheme to image. It changes current color scheme to sepia color scheme i.e. applying sepia filter.
  • .shadow {filter: drop-shadow(8px 8px 10px blue);} - This applies the drop shadow to image. It applies a blue drop shadow to image.

Tags

Comments

Post a Comment