A CodePen by Pete. CSS3 Scaling Thumbnails - For my portfolio I wanted a grid of thumbnails that scaleZ on hover, overlapping their siblings. Added some blur and some scaling effect to the thumb title to create a neat depth effect. Still tweaking for mobi

index.html

<a href="#" class="thumbnail green"><img src="http://www.photographyblogger.net/wp-content/uploads/2011/02/0410.jpg"><span class="title">Thumb Title</span></a>

<a href="#" class="thumbnail blue"><img src="http://25.media.tumblr.com/tumblr_m4zl640xqN1rxrpico2_1280.jpg"><span class="title">Thumb Title</span></a>

<a href="#" class="thumbnail red"><img src="http://3.bp.blogspot.com/-fZzVHhusP04/Ta-RoCMJW2I/AAAAAAAABxc/ehuIytZernY/s1600/FROGpoison-dart-frog_5869_600x450.jpg"><span class="title">Thumb Title</span></a>

<a href="#" class="thumbnail purple"><img src="http://1.bp.blogspot.com/-_DbIIL07P6c/Ta-TQOMl0qI/AAAAAAAABxo/jSW1GbNfrj0/s1600/frog-picture.jpg"><span class="title">Thumb Title</span></a>

style.scss

@import "compass";
/*

 Needs some optimizing on mobile. Works best in Chrome at the moment.

*/

body{
  margin: 40px;
  font-family: 'Helvetica Neue', 'Helvetica', sans-serif;
}

@mixin transition($speed: .25s){
  -webkit-transition: all $speed ease-in-out;
  -moz-transition: all $speed ease-in-out;
  transition: all $speed ease-in-out;
  -webkit-transform: translateZ(0);
  -moz-transform: translateZ(0);
  transform: translateZ(0);
}

@mixin transform($scale){
  -webkit-transform: scale($scale) rotate(0.1deg);
  -moz-transform: scale($scale) rotate(0.1deg);
  transform: scale($scale) rotate(0.1deg);
}

@mixin blur($blur){
  -webkit-filter: blur($blur);
  -moz-filter: blur($blur);
  filter: blur($blur);
}

$green: rgba(27, 90, 42, 1);
$blue: rgba(28, 60, 90, 1);
$red: rgba(90, 31, 26, 1);
$purple: rgba(51, 31, 90, 1);

.thumbnail{
  position: relative;
  display: inline-block;
  width: 300px;
  height: 180px;
  margin: 0 11px 11px 0;
  font-size: 1.5em;
  text-align: center;
  text-transform: uppercase;
  font-weight: 900;
  color: rgba(255,255,255,0.9);
  background: #fff;
  overflow: hidden;
  @include transition;
  
  &.green{ background: $green; }
  &.blue{ background: $blue; }
  &.red{ background: $red; }
  &.purple{ background: $purple; }

  img{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: .2;
    @include transition;
    @include blur(2px);
  }

  .title{
   position: absolute;
   left: 0;
   top: 40%;
   width: 100%;
   text-align: center;
   @include transition;
  }

  &:hover{
   z-index: 999;
   @include transform(1.1);
   box-shadow: 0px 4px 10px rgba(0,0,0,0.5);

    .title{
     @include transform(.85);
     color: rgba(255,255,255,0.0);
   }
   img{
    opacity: 1;
    @include blur(0);
   }
  }
  
  &:active{
    @include transform(1.08);
    box-shadow: 0px 2px 8px rgba(0,0,0,.7);
    
    img{
     opacity: 0.7;
    }
  }
}