Fisheye Panel

by Jimmy Chandra

HTML

<script src="https://github.com/downloads/uxebu/bonsai/bonsai-0.4.1.min.js"></script>
<ul class='stack'>
  <li class='back'><div>Foo</div></li>
  <li class='front'><div>Bar</div></li>
  <li class='back'><div>Baz</div></li>
  <li class='back'><div>Gaz</div></li>
</ul>

CSS

body * {
  font: 9pt segoe ui,sans-serif
}

ul.stack li {
  display:inline-block;
  cursor: pointer;
}

ul.stack li.front {
  z-index:100;  
}

ul.stack li.front > div {
  padding:10px;
  background: #900;
  color: #fff;
  -moz-box-shadow: 0 0 5px #000;
	-webkit-box-shadow: 0 0 5px #000;
	box-shadow: 0 0 5px #000;
}

ul.stack li.back {
  z-index: 0;
}

ul.stack li.back > div {
  margin:5px 0;
  padding:5px;
  -moz-box-shadow: 0 0 5px #888;
	-webkit-box-shadow: 0 0 5px #888;
	box-shadow: 0 0 5px #888;
}

ul {
  margin: 5px;
}

JavaScript

$(function() {
  $("ul.stack li").mouseover(function() {
    $('ul.stack li.front').removeClass('front').addClass('back');
    $(this).removeClass('back').addClass('front');
  });
});