Content over an image with a blur effect

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.

blurred-image

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.

Quick References
Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s