NSFW Blocker Using MooTools and CSS

By  on  

One of my guilty pleasures is scoping out the latest celebrity gossip from PerezHilton.com, DListed.com, and JoBlo.com. Unfortunately, these sites occasionally post NSFW pictures which makes checking these sites on lunch a huge gamble -- a trip to HR's office could be just a click away.

Since most of the time it's just a portion of a given picture that could be considered inappropriate, I asked myself if there was a way to get the gist of an article's graphic without having to hide the entire image. For that reason, I've created a NSFW blocker using CSS and MooTools.

Step 1: The XHTML

<div class="nsfw-wrapper">
	<div class="blocker" style="width:32px;height:50px;margin:68px 0 0 38px;"></div>
	<img src="johnny-cash.jpg" alt="Johnny Cash" />
</div>
<div class="nsfw-wrapper">
	<div class="blocker" style="width:30px;height:30px;margin:47px 0 0 13px;"></div>
	<div class="blocker" style="width:30px;height:30px;margin:60px 0 0 121px;"></div>
	<img src="2pac.jpg" alt="Tupac Shakur" />
</div>
<div class="nsfw-wrapper">
	<div class="blocker" style="width:50px;height:50px;margin:118px 0 0 80px;"></div>
	<img src="bush.jpg" alt="President Bush" />
</div>

Each wrapper DIV is given the nsfw-wrapper class. Inside the DIV is another DIV which serves as a blocker for the other element, the image. I recommend using an inline style to define the height, weight, and position of the blocker.

Step 2: The CSS

.nsfw-wrapper 	{  width:200px; float:left; margin:0 20px 0 0; }
.blocker			{ background:#f00; position:absolute; }

The nsfw-wrapper class can be formatted any way you'd like. The nsfw class must be positioned absolutely and you can choose any background color you'd like for your blocker.

Step 3: The Mootools JavaScript

//window on dom ready
window.addEvent('domready', function() {
	$$('.nsfw-wrapper').each(function(el) {
		el.addEvents({
				'mouseenter': function() {
			//fade out the blocker
			el.getElements('div').each(function(div) {
				div.fade('out');
			});
		},
		'mouseleave': function() {
			//fade out the blocker
			el.getElements('div').each(function(div) {
				div.fade('in');
			});
		  }
		});
	});
});

Once the DOM is ready, we grab each wrapper. For every wrapper, we add an event that fades out the blocker(s) on mouse enter and fades the blocker back in when the mouse leaves.

This example is safe for work -- blocked middle fingers only.

Recent Features

  • By
    Write Simple, Elegant and Maintainable Media Queries with Sass

    I spent a few months experimenting with different approaches for writing simple, elegant and maintainable media queries with Sass. Each solution had something that I really liked, but I couldn't find one that covered everything I needed to do, so I ventured into creating my...

  • By
    CSS @supports

    Feature detection via JavaScript is a client side best practice and for all the right reasons, but unfortunately that same functionality hasn't been available within CSS.  What we end up doing is repeating the same properties multiple times with each browser prefix.  Yuck.  Another thing we...

Incredible Demos

  • By
    HTML5&#8217;s window.postMessage API

    One of the little known HTML5 APIs is the window.postMessage API.  window.postMessage allows for sending data messages between two windows/frames across domains.  Essentially window.postMessage acts as cross-domain AJAX without the server shims. Let's take a look at how window.postMessage works and how you...

  • By
    MooTools Documentation Search Favelet

    I'm going to share something with you that will blow your mind: I don't have the MooTools documentation memorized. I just don't. I visit the MooTools docs frequently to figure out the order of parameters of More classes and how best to use...

Discussion

  1. Thanks for that. I haven’t tried it, but it seems useful. It might help many that don’t like to makeover the pictures.

  2. Loved the post David and gave you some love on Ajaxian. Keep up the good work:

    http://ajaxian.com/archives/nsfw-blocker-using-mootools

  3. Glad you like it Rey!

  4. Congrats David! This post was just put on Ajaxian! Keep it up!

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