Sexy Album Art with MooTools or jQuery

By  on  
Album Art

The way that album information displays is usually insanely boring. Music is supposed to be fun and moving, right? Luckily MooTools and jQuery allow us to communicate that creativity on the web.

The XHTML

<div id="album">
	<div id="album-front"></div>
	<div id="album-back"></div>
	<div id="album-desc">
		<h3>Every Picture Tells A Story</h3>
		<p>
			Every Picture Tells a Story is the third album by Rod Stewart, released in the middle of 1971. It became Stewart's most critically acclaimed album, and became the standard by which all of his subsequent albums were judged.<br />
			<a href="javascript:;" style="font-weight:bold;">Buy Now!</a> | <a href="javascript:;">More Rod Stewart Albums</a>
			<br /><img src="everypicture-stars.gif" alt="5 Stars!" style="margin-top:10px;" />
		</p>
	</div>
</div>

A few structure DIVs and the album information.

The CSS

#album			{ width:500px; position:relative; }
#album-front	{ width:400px; height:393px; background:url(everypicture-front.png) 0 0 no-repeat; cursor:pointer; position:absolute; top:0; left:0; z-index:1; }
#album-back		{ display:none; width:250px; height:194px; position:absolute; top:250px; left:250px; background:url(everypicture-back.png) 0 0 no-repeat; z-index:3; }
#album-desc		{ display:none; font-size:10px; font-family:tahoma; border:1px solid #7B7057; padding:10px; width:230px; position:absolute; top:20px; left:250px; z-index:3; -webkit-border-radius:8px; -moz-border-radius:8px; border-radius:8px; background:#fff; }

The CSS is used mostly for positioning and the imagery. I chose to incorporate the album images as background images -- you could use IMG tags if you want.

The MooTools JavaScript

(function($) {
	window.addEvent('domready',function() { 
		//settings
		var fades = $$('#album-back,#album-desc');
		//init
		fades.setStyles({
			opacity: 0,
			display: 'block'
		});
		//hover version
		$('album').addEvents({
			mouseenter: function() {
				fades.fade('in');
			},
			mouseleave: function() {
				fades.fade('out');
			}
		});
	});
})(document.id);

Simple fading in and fading out -- nothing more.

The jQuery JavaScript

$(document).ready(function() {
	//settings
	var fades = $('#album-back,#album-desc');
	//hover version
	$('#album').hover(function() {
		fades.fadeIn(250);
	}, function() {
		fades.fadeOut(250);
	});
});

I think this is a great way to add some dynamism to an otherwise boring display. Rod Stewart FTW!

Recent Features

  • By
    5 HTML5 APIs You Didn&#8217;t Know Existed

    When you say or read "HTML5", you half expect exotic dancers and unicorns to walk into the room to the tune of "I'm Sexy and I Know It."  Can you blame us though?  We watched the fundamental APIs stagnate for so long that a basic feature...

  • By
    6 Things You Didn&#8217;t Know About Firefox OS

    Firefox OS is all over the tech news and for good reason:  Mozilla's finally given web developers the platform that they need to create apps the way they've been creating them for years -- with CSS, HTML, and JavaScript.  Firefox OS has been rapidly improving...

Incredible Demos

  • By
    Create Keyboard Shortcuts with Mousetrap

    Some of the finest parts of web apps are hidden in the little things.  These "small details" can often add up to big, big gains.  One of those small gains can be found in keyboard shortcuts.  Awesome web apps like Gmail and GitHub use loads of...

  • By
    Create a Trailing Mouse Cursor Effect Using MooTools

    Remember the old days of DHTML and effects that were an achievement to create but had absolutely no value? Well, a trailing mouse cursor script is sorta like that. And I'm sorta the type of guy that creates effects just because I can.

Discussion

  1. AWSUM article !! :)

    I have to tell that moo transition is smooother than jquery..

  2. That tends to be the case, kburn.

  3. MS

    Very nice, thank you!

  4. Listen2Me

    That was a scary insight into your music tastes David!

  5. Hi David,
    Nice stuff! Just one remark, you could use fades.fade('hide') instead of

    fades.setStyles({
      opacity: 0,
      display: 'block'
    });
    

    And now I wonder, isn’t the default duration of moo 500ms? You probably should make them the same, y?

  6. carlos

    Gracias por el código y la idea.

  7. Thanks for sharing. Came in really handy.

  8. dev

    if i hover many time, it will play non-stop and feel like not good but if i use .stop.fadeIt(250) method and hover many time , it opacity will reduce and eventually wont show, it like disappear, not sure if there any solution, can share?

    Thank.

  9. Tommix

    Nice, but how to make description div to apear on ALBUM div or near it? i hate absolute possitions, on every page it’s diferrent so how to make it stick with parent div?

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