Playing around with CSS transitions for a project I'm working on.
Forked from Rafael Rinaldi's Pen Bookshelf.
Forked from Rafael Rinaldi's Pen Bookshelf.
A Pen by Cristian Olarasu on CodePen.
Playing around with CSS transitions for a project I'm working on.
Forked from Rafael Rinaldi's Pen Bookshelf.
Forked from Rafael Rinaldi's Pen Bookshelf.
A Pen by Cristian Olarasu on CodePen.
<ul class='list-inline'> | |
<li class='book'> | |
<img src='http://37signals.com/images/remote/remote_front.png' /> | |
</li> | |
<li class='book'> | |
<img src='http://www.blanq.org/text/moleskine_iphone_wallpaper.jpg' /> | |
</li> | |
<li class='book'> | |
<img src='https://d.gr-assets.com/books/1348927776l/8032112.jpg' /> | |
</li> | |
<li class='book'> | |
<img src='http://ecx.images-amazon.com/images/I/51oXKWrcYYL.jpg' /> | |
</li> | |
</ul> |
$color-bg: #fde3a7; | |
$book-color-bg: lighten($color-bg, 20%); | |
$book-color-border: lighten(#000, 85%); | |
$book-border: 1px solid $book-color-border; | |
%book-rounded-corners { | |
border-top-right-radius: 5px; | |
border-bottom-right-radius: 5px; | |
} | |
// LOL CSS | |
body, | |
html { | |
width: 100%; | |
height: 100%; | |
display: table; | |
text-align: center; | |
} | |
body { | |
background: #fde3a7; | |
} | |
ul { | |
display: table-cell; | |
vertical-align: middle; | |
} | |
.list-inline { | |
padding-left: 0; | |
list-style: none; | |
> li { | |
display: inline-block; | |
margin-left: 2em; | |
} | |
> li:first-child { | |
margin-left: 0; | |
} | |
} | |
.book { | |
@extend %book-rounded-corners; | |
cursor: pointer; | |
display: block; | |
width: 150px; | |
height: 220px; | |
position: relative; | |
background: $book-color-bg; | |
z-index: 1; | |
box-shadow: 0 2px 4px 0 rgba(#000, .1), 0 9px 20px 0 rgba(#000, .25); | |
overflow: hidden; | |
transition: box-shadow .3s linear; | |
} | |
.book img { | |
@extend %book-rounded-corners; | |
width: inherit; | |
height: inherit; | |
transform-origin: 0 50%; | |
transform: rotateY(0); | |
transition: all .45s ease; | |
} | |
.book:hover { | |
box-shadow: 0 2px 4px 0 rgba(#000, .25), 0 9px 20px 0 rgba(#000, .45); | |
img { | |
transform: rotateY(-25deg); | |
box-shadow: 1px 1px 5px 5px rgba(#000, .2); | |
} | |
} | |
.book::after, | |
.book::before { | |
@extend %book-rounded-corners; | |
content: ''; | |
display: block; | |
width: inherit; | |
height: inherit; | |
position: absolute; | |
z-index: -1; | |
top: 0; | |
background: $book-color-bg; | |
border: $book-border; | |
} | |
.book::before { left: -3px; } | |
.book::after { left: -6px; } |