Skip to content

Instantly share code, notes, and snippets.

@petekp petekp/index.html
Created Oct 13, 2012

Embed
What would you like to do?
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 mobile and non-Chrome browsers.
<a href="#" class="thumbnail green"><div class="photo"><img src="http://www.photographyblogger.net/wp-content/uploads/2011/02/0410.jpg"></div><span class="title">Thumb Title</span></a>
<a href="#" class="thumbnail blue"><div class="photo"><img src="http://25.media.tumblr.com/tumblr_m4zl640xqN1rxrpico2_1280.jpg"></div><span class="title">Thumb Title</span></a>
<a href="#" class="thumbnail red"><div class="photo"><img src="http://3.bp.blogspot.com/-fZzVHhusP04/Ta-RoCMJW2I/AAAAAAAABxc/ehuIytZernY/s1600/FROGpoison-dart-frog_5869_600x450.jpg"></div><span class="title">Thumb Title</span></a>
<a href="#" class="thumbnail purple"><div class="photo"><img src="http://1.bp.blogspot.com/-_DbIIL07P6c/Ta-TQOMl0qI/AAAAAAAABxo/jSW1GbNfrj0/s1600/frog-picture.jpg"></div><span class="title">Thumb Title</span></a>
@import "compass";
/*
Still optimizing for mobile. Works best in Chrome at the moment.
*/
body{
margin: 40px;
}
@mixin transition{
-webkit-transition: all .25s ease-in-out;
-moz-transition: all .25s ease-in-out;
transition: all .25s 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;
background: #fff;
font-size: 1.5em;
text-align: center;
text-transform: uppercase;
font-family: 'Helvetica Neue', 'Helvetica', sans-serif;
font-weight: 900;
color: rgba(255,255,255,0.9);
overflow: hidden;
@include transition;
&.green{ background: $green; }
&.blue{ background: $blue; }
&.red{ background: $red; }
&.purple{ background: $purple; }
.photo{
position: absolute;
width: 100%;
height: 100%;
opacity: .2;
img{ width: 100%; height: 100%; }
@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);
}
.photo{
opacity: 1;
@include blur(0);
}
}
&:active{
@include transform(1.08);
box-shadow: 0px 2px 8px rgba(0,0,0,.7);
.photo{
opacity: 0.7;
}
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.