Created
October 13, 2012 06:53
-
-
Save petekp/3883602 to your computer and use it in GitHub Desktop.
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.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<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> | |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
@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