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
    39 Shirts &#8211; Leaving Mozilla

    In 2001 I had just graduated from a small town high school and headed off to a small town college. I found myself in the quaint computer lab where the substandard computers featured two browsers: Internet Explorer and Mozilla. It was this lab where I fell...

  • By
    Vibration API

    Many of the new APIs provided to us by browser vendors are more targeted toward the mobile user than the desktop user.  One of those simple APIs the Vibration API.  The Vibration API allows developers to direct the device, using JavaScript, to vibrate in...

Incredible Demos

  • By
    Flexbox Equal Height Columns

    Flexbox was supposed to be the pot of gold at the long, long rainbow of insufficient CSS layout techniques.  And the only disappointment I've experienced with flexbox is that browser vendors took so long to implement it.  I can't also claim to have pushed flexbox's limits, but...

  • By
    Create a Dojo Lightbox with dojox.image.Lightbox

    One of the reasons I love the Dojo Toolkit is that it seems to have everything.  No scouring for a plugin from this site and then another plugin from that site to build my application.  Buried within the expansive dojox namespace of Dojo is

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!