The CSS filter property provides an easy option to add various effects to an image, without doing external image processing.
I recently came across a design where there was some content over an image, with a blur effect on the image, plus a color tint only on the area of the content. Something similar to the image below.
One option to do it would be to take the image with the blurred part intact and just add the text on top, but that would be a headache to maintain the responsiveness. The best option is to use the blur option of the CSS filter.
However, the filter should be applied to an image or a background image of an element. To get the above effect, we have to go apply the filter to a background image. In addition to the blur, there is also a purple tint applied as well. To get these multiple effect, we have to take advantage of CSS pseudo classes as well.
First, the HTML:
<div class="container">
<div clas="row">
<div class="col-12">
<div class="blur-image-test">
<img src="sigiriya.jpg" alt="" />
<div class="content-ribbon">
<h1>Hello World!</h1>
</div>
</div>
</div>
</div>
</div>
Ignore the Bootstrap classes used for the layout.
Now, the CSS:
.blur-image-test{
position: relative;
width: 100%;
max-width: 900px;
}
.blur-image-test img{
width: auto;
max-width: 100%
}
.blur-image-test .content-ribbon {
padding: 0;
color: #fff;
width: 100%;
top: 50% !important;
left: 0 !important;
-ms-transform: translateX(0) !important;
transform: translateX(0) !important;
-ms-transform: translateY(-50%) !important;
transform: translateY(-50%) !important;
position: absolute;
min-height: 40%;
}
.blur-image-test .content-ribbon:before {
content: "";
position: absolute;
left: 0;
top: 0;
bottom: 0;
z-index: -2;
display: block;
background: url(sigiriya.jpg) center center no-repeat;
width: 100%;
background-size: cover;
-webkit-filter: blur(5px);
-moz-filter: blur(5px);
-o-filter: blur(5px);
-ms-filter: blur(5px);
}
@media all and (-ms-high-contrast: none) {
.blur-image-test .content-ribbon:before {
background: url(../../images/redesign/hero-banner-blurred.png) center center no-repeat;
background-size: cover; } }
.blur-image-test .content-ribbon:after {
content: "";
position: absolute;
left: 0;
top: 0;
bottom: 0;
z-index: -1;
display: block;
width: 100%;
background-color: rgba(92, 45, 145, 0.2);
}
.blur-image-test .content-ribbon h1{
text-align: center;
position: absolute ;
top: 50%;
transform: translateY(-50%);
width: 100%;
}
The first important section of the CSS is the content ribbon area.
.blur-image-test .content-ribbon {
padding: 0;
color: #fff;
width: 100%;
top: 50% !important;
left: 0 !important;
-ms-transform: translateX(0) !important;
transform: translateX(0) !important;
-ms-transform: translateY(-50%) !important;
transform: translateY(-50%) !important;
position: absolute;
min-height: 40%;
padding: 20px;
}
Use absolute positioning and top position 50% and transform: translateY(-50%) to keep it vertically centered in the image container. If padding is used, make sure that box-sizing: border-box options is added, otherwise, it would cause some alignment issues with the background image used in the content ribbon and the actual image.
Next, use the :before pseudo class to get the blur effect.
.blur-image-test .content-ribbon:before {
content: "";
position: absolute;
left: 0;
top: 0;
bottom: 0;
z-index: -2;
display: block;
background: url(sigiriya.jpg) center center no-repeat;
width: 100%;
background-size: cover;
-webkit-filter: blur(5px);
-moz-filter: blur(5px);
-o-filter: blur(5px);
-ms-filter: blur(5px);
}
Make it position: absolute and give the z-index as -2 so that it will be the bottom most layer. The color tint will have to be applied above it.
Next, add the color tint using the :after pseudo class.
.blur-image-test .content-ribbon:after {
content: "";
position: absolute;
left: 0;
top: 0;
bottom: 0;
z-index: -1;
display: block;
width: 100%;
background-color: rgba(92, 45, 145, 0.2);
}
Make this also position: absolute and give the z-index as -1, so it will be above the :before pseudo class in which the blur effect is applied.
The CSS filter property is supported by all major browsers expect IE. To get the same effect on IE browsers, a blurred out image of the original must be created and used.
@media all and (-ms-high-contrast: none) {
.blur-image-test .content-ribbon:before {
background: url(sigiriya-blurred.jpg) center center no-repeat;
background-size: cover;
}
}
This way the above design can be easily created.
Here is a link to the CodePen sample.
