urld

urld-all.css

<style>
	.portrait {
		float: left;
		width: 120px;
		margin-right: 35px;
		margin-bottom: 50px;
	}

	.portrait .name {
		font-size: 14px;
		line-height: 1.2em;
		color: #0099ff;
	}

	.portrait .position {
		font-size: 11px;
		line-height: 1.2em;
		color: gray;
	}

	.portrait .twitter {
		font-size: 11px;
		line-height: 1.2em;
		color: gray;
	}

	.portrait .thumbnail {
		width: 120px;
		height: 120px;
		background-image: url('/images/team.jpg'); 
		background-color: transparent; 
		background-repeat: no-repeat;
	}

	.portrait .description {
		z-index: 1000;
		border-radius: 5px;
		padding: 10px;
		font-size: 12px;
		line-height: 1.5em;
		width: 300px;
		height: 150px;
		background: #0099ff;
		color: white;
		margin-top: -150px;
		display: none;
		border: 1px solid white;
		box-sizing: border-box;
	}


.dai.bottom.center { background-position: 0px 0px; }
.dai.bottom.left { background-position: -120px 0px; }
.dai.bottom.right { background-position: -240px 0px; }
.dai.middle.center { background-position: -360px 0px; }
.dai.middle.left { background-position: -480px 0px; }
.dai.middle.right { background-position: -600px 0px; }
.dai.top.center { background-position: -720px 0px; }
.dai.top.left { background-position: -840px 0px; }
.dai.top.right { background-position: -960px 0px; }

</style>

urld-all.js

<script>
	$(function() {
		/*
		$(".thumbnail").hover(function() {
			var desc = $(this).parent().find(".description");
			desc.fadeIn(100);

		}, function() {
			var desc = $(this).parent().find(".description");

			desc.fadeOut(100);
		});
		*/

		var thumbnails = $(".portrait .thumbnail");

		$(window).mousemove(function(mouseEvent) {
			thumbnails.each(function() {
				var mouseX = mouseEvent.pageX;
				var mouseY = mouseEvent.pageY;

				var offset = $(this).offset();

				var startX = offset.left;
				var startY = offset.top;

				var endX = startX + $(this).width();
				var endY = startY + $(this).height();

				$(this).removeClass("top middle bottom left center right");

				if (mouseX < startX) {
					$(this).addClass("left");
				} else if (mouseX > endX) {
					$(this).addClass("right");
				} else {
					$(this).addClass("center");
				}

				if (mouseY < startY) {
					$(this).addClass("top");
				} else if (mouseY > endY) {
					$(this).addClass("bottom");
				} else {
					$(this).addClass("middle");
				}

			});
		});

	});


</script>