Bookshelf (css only)

22 Mar 2013

Most of my sources are online, but every once in a while I just like to read a book. Most of the books I buy are technical/work-related so most of the time I end up online again (coding, experimenting etc).

At the beginning of this year it looked like bookshelves popped up everywhere. Not actual bookshelves, but digital versions on the web. Most of these shelves were created with just CSS and it got me excited (yes, i have that really quickly). Without taking to much notice of the Codrops bookshelf (which is really impressive!) I just started from scratch and came up with a fairly simple bookshelf as you can see in the screenshot below.

Bookshelf

It uses the css :hover state to trigger the the overlays so it won't work very well on a touch device. I tried it on an iPhone and iPad and it looks fine, but the Interaction is just horrible. Adding a little JS (which I didn't add in the current version) might fix the touch issues...

View demo