.examples{ padding: 0; }
.examples > li{ display: block; float: left; list-style-type: none; margin: 0 12px 12px 0; width: 200px; height: 150px; position: relative; }
.examples > li a{ position: absolute; top: 0; left: 0; right: 0; bottom: 0; text-decoration: none; font-size: .9em; }
.examples > li label{ display: block; position: absolute; top: 0; left: 0; right: 0; padding: 3px 12px; color: #fff; background: #222; }
.examples > li a > strong{ display: block; position: absolute; bottom: 0; right: 0; padding: 1px 5px; color: #fff; background: #bd0000; font-size: .8em; }
.examples > li .icon{ display: block; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: #fff no-repeat center; }
.examples > li ul{ display: none; position: absolute; top: 6px; left: 6px; right: 6px; bottom: 6px; padding: 12px 36px; }
.examples > li ul:before{ content: 'Features:'; font-weight: bold; color: #000; padding-bottom: 6px; display: block; }
.examples > li a:hover ul{ display: block; background: #fff; opacity: .9; }
.examples > li a:hover label{ display: none; }