O'Reilly

Spoiler Prevention with CSS Filters

By on  
CSS Filter

No one likes a spoiler.  Whether it be an image from an upcoming film or the result of a football match you DVR'd, sometimes you just don't want to know.  As a possible provider of spoiler content, some sites may choose to warn users ahead of time.  Sometimes the article title is prefixed with [SPOILER] text or a something similar.  I've thought of a better way -- use CSS filters to blur spoiler content.

The CSS

CSS filters provide a simple way to blur the spoiler content so that the underlying image or text is not legible:

.spoiler {
	-webkit-filter: blur(20px);
	-webkit-transition-property: -webkit-filter;
	-webkit-transition-duration: .4s;
}
.spoiler:hover, .spoiler:focus {
	-webkit-filter: blur(0px);
}

You will also note that hovering over the offending content will animate the blur until it's been removed.  Unfortunately CSS filters are only supported in WebKit at the moment, but we can no doubt expect more browser support shortly. Also note the :focus addition -- if you set tabIndex=0 on all .spoiler elements, you can support mobile touch to unblur as well!

This jQuery plugin tipped me off on how to achieve a similar blur within Firefox using SVG:

<img src="ricci.jpg" alt="Christina Ricci" class="spoiler" style="filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'blur\'><feGaussianBlur stdDeviation=\'20\' /></filter></svg>#blur");" />

Not the most beautiful of code but works nonetheless.  Changing the stdDeviation to 0 (via JavaScript) would present the element without blur.

Preventing spoiler content is a very limited case (even more limited in the case the photo is Christina Ricci) but it's good to have a strategy just in case.  I like this strategy because it provides an easy option to the user (hovering) to view the obscured content.

Track.js Error Reporting

Recent Features

  • 5 Ways that CSS and JavaScript Interact That You May Not Know About

    CSS and JavaScript:  the lines seemingly get blurred by each browser release.  They have always done a very different job but in the end they are both front-end technologies so they need do need to work closely.  We have our .js files and our .css, but...

  • CSS vs. JS Animation: Which is Faster?

    How is it possible that JavaScript-based animation has secretly always been as fast — or faster — than CSS transitions? And, how is it possible that Adobe and Google consistently release media-rich mobile sites that rival the performance of native apps? This article serves as a point-by-point...

Incredible Demos

  • Create Classy Inputs Using MooTools&#8217; OverText

    The MooTools More library is a goldmine. A treasure chest. Pirates booty, if you will (and, of course, I will). More is full of plugins that add a lot of class and functionality to your website with minimal effort.

  • Create Custom Events in MooTools 1.2

    Javascript has a number of native events like "mouseover," "mouseout", "click", and so on. What if you want to create your own events though? Creating events using MooTools is as easy as it gets. The MooTools JavaScript What's great about creating custom events in MooTools is...

Discussion

  1. I was actually going to write about this but my only issue is it’s a little buggy in that when you hover over the image initially it the blur radius might change, and then on mouse out the blur will not exceed the limits of the image. It’s a beautiful effect but unfortunately the implementation is not quite there.

  2. Yeah, I like the effect. I did something similar quite a while ago using the text-shadow property to create a “blurry” kind of overlay (http://devseo.co.uk/blog/view/blurry-text-simple-snapshots-with-html-css3) this is a lot more effective, but I don’t like the way it “pops” at the end of the animation before completing the “faded” animation

  3. Very cool but only works in Chrome for me. No dice in Firefox nor IE10.

    Thanks.

    • As the post mentions, this is WebKit-only until Firefox and IE implement CSS filters.

  4. Thanks for the svg filter code. This looks like it could be handy for lots of things. Like Lea Verou’s blurred background behind a semitransparent text–background overlay, over a background image.

  5. The blurr effect is much similar with the “fade effect” like here: http://theweeblytricks.weebly.com/3.html

Wrap your code in <pre class="{language}"></pre> tags, link to a GitHub gist, JSFiddle fiddle, or CodePen pen to embed!

Recently on David Walsh Blog

  • OSCON Portland:  Conference  Discount!

    O'Reilly puts on the best web industry conferences in the world.  These conferences include Fluent Conference, Velocity Conference, and the upcoming OSCON in Portland, Oregon from July 20-24.  Open Source Convention (OSCON) is a conference that focuses specifically on open source developers and the tools and possibilities...

  • Follow Redirects with cURL

    I love playing around with cURL. There's something about loading websites via command line that makes me feel like some type of smug hacker, just like tweeting from command line does. I recently cURL'd the Google homepage and saw the following: I found it weird that Google...

  • Developers Have WordPress, Amateurs Have Squarespace, Professional Designers Have the NEW Webydo!

    Web design platforms have traditionally come in one of two varieties. There are the solutions like WordPress and Drupal that are incredibly powerful, but an understanding of web development and coding is required to be able to use those platforms effectively. On the other side of the...

  • Chris Coyierâs Favorite CodePen Demos II

    Hey everyone! Before we get started, I just want to say it’s damn hard to pick this few favorites on CodePen. Not because, as a co-founder of CodePen, I feel like a dad picking which kid he likes best (RUDE). But because there is just so...

  • GSAP + SVG For Power Users: Motion Along A Path

    Now that the GreenSock API is picking up steam, there are many tutorials and Getting Started guides out there to provide good introductions to the library, not to mention GreenSock’s own Forum and Documentation. This article isn’t intended for beginners, but rather a...