“Look Inside” Book Preview with BookBlock

A "look inside" book preview with BookBlock. A concept for book showcases or online book stores that shows a grid of books with the options to view the details and to look inside of the book, opening the BookBlock in fullscreen and allowing for a 3D page navigation.

From our sponsor: Try Mailchimp today.

There is something really fascinating about (real) books. Although we live in times where everything is digitalized by now, there is really nothing like picking up a real book and browsing through the pages. Many layouts on the web try to transmit that feeling by creating book-like experiences. On Codrops we’ve played many times with these kind of layouts, too. Today we’d like to show you a little concept for an online bookstore or book collection, using our BookBlock script. The idea is to show a grid of books where we can view some details of the book and where we can open the book to preview an excerpt. You surely know this kind of “look inside” option from Amazon, where you can have a taste of a book’s content. For the book preview we are using BookBlock in fullscreen and for the small books we use a structure with perspective that allows us to open the book in 3D.

Please note that this is just a proof-of-concept and might not work properly in older browsers.

For the book grid we use figures and this is how it looks:

When we click on “view details”, we rotate the book in 3D and move it to the left side, allowing for the details to slide in from the right:

Once “look inside” is clicked we perform a series of animations on the book, its cover and the BookBlock. The small book will open and scale up while the BookBlock fades in and scales up a bit. The fullscreen BookBlock shows the first preview pages:

When clicking on one of the navigation arrows, we flip the respective page in 3D and reveal the next ones:


We love playing with books in our experiments, so if you’d like to explore some similar articles and demos, check out these ones:

As mentioned before, this is an experimental concept implementation so if you find any bugs or glitches please let us know.

I hope you find this interesting and inspiring!

Tagged with:

Mary Lou

ML is a freelance web designer and developer with a passion for interaction design. She studied Cognitive Science and Computational Logic and has a weakness for the smell of freshly ground peppercorns.


Stay up to date with the latest web design and development news and relevant updates from Codrops.

Feedback 68

Comments are closed.
  1. Amazing.
    i have seen the code, and i want ask a question.
    Can i change the cover without .svg ?
    I mean maybe it can change with picture.
    Please, help me.


  2. Hello Mary Lou,

    I’m using your plugin in one of our website. It works fine but I’m facing two issues:

    1- On Google Chrome, when we are in fullscreen mode, the pages are flickering when we switch page. I am using the latest bookblock.css.

    2- Is there a way to make it works on IE8 and lower?

    Thank You.


  3. Hi Mary,

    Thanks for this lovely script. Its simply awesome!

    I am making a website for my friend who has written two novels and I want to apply this script with two modifications.

    1. How can I make the whole SVG clickable rather than just LOOK INSIDE text?
    2. How do I replace this SVG with an Image?

    Thanks and keep up the good work! I always like to come back and see where front end coding is going ahead, even though I am not a coder myself.

  4. Hi. Is it possible to customize this BOOK PREVIEW for right to left language book, like as Arabic and Persian?
    For example Persian books open reverse. Anybody can help me? tnx a lot…

  5. Your idea for bookstore is interesting. However, my impression is,
    you require .svg files for the book cover and separate .jpg files for in interior
    are lethal. The standard of this industry is using .jpg for the cover and ONE .pdf
    for the interior. I tried to modify your code but unsuccessful.

  6. Hi. This is a very cool feature and i plan to use it on my website. Is it possible to close the book’s details if the user clicks outside of the details and the box lose focus? I don’t like that the user must click on the close button. Could you tell me on which element i have to register the EventListener to solve this?

    • I would like the same thing. But cannot find any stopPropagation() or toggle() in the code. Please someone answer 🙂

  7. Why bookblock.min.js is minified? Am i not able to see how it works? I would like to inspect debug version of that file. Any ideas?

  8. It would seem that (at least here on my local computer, that the book transition is broken. When you click on the details tab, the cover dissapears into a grey background. Has anyone else had this issue?

    I’ve seen this effect work tiems before without this issue posing itself, so I am not sure as to why it is happening now. Some dependancy may have changed.

    • Never mind, it would seem that it was just an issue with my monitor setup.. Still not sure why this was happening though!

    • Hi Will, it is indeed broken, thanks for pointing that out! I’ll try to find a solution for it and I’ll update the source code ASAP. Cheers, ML.

  9. Hi Mary Lou…
    Nice work. Really amazing. I have one doubt in this script..how to set speed of opening and closing..

  10. Hey Mary, I am wondering if you could help me with something.. I am trying to decipher some of this code but i am not as advanced in scripting yet. Although, would love some help if possible. Can you guide me on what I need to look at or simply change in the script so that I can combine the presentation (look and function) of the books in the 3D Book Showcase demo that you used the link for (http://tympanus.net/Development/3DBookShowcase/) with the fullscreen bookblock effect? Thanks in advance and greatly appreciate it.

    • To elaborate into more detail on this, I would like this so that once a user clicks on the view inside button, the book opens up to the inside page. Then within the inside page, have a link that once it is clicked, it expands into the fullview of the bookblock effect… hope this clarified things more.