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
    Create a CSS Cube

    CSS cubes really showcase what CSS has become over the years, evolving from simple color and dimension directives to a language capable of creating deep, creative visuals.  Add animation and you've got something really neat.  Unfortunately each CSS cube tutorial I've read is a bit...

  • By
    How to Create a Twitter Card

    One of my favorite social APIs was the Open Graph API adopted by Facebook.  Adding just a few META tags to each page allowed links to my article to be styled and presented the way I wanted them to, giving me a bit of control...

Incredible Demos

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!