“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: Ship fast and never break a thing with Shortcut (formerly Clubhouse.io).

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. Awesome work

    I always follow are web updates and i am just amazed every time i visit.

    Carry on the great work.

    May god bless u

  2. I downloaded the code, but I can’t see where the interior pages of the books are located (with the exception of the portrait .jpg). This is really good and I’d love to work with this and see what I can do with it!

  3. Really nice and excellent work, but I get error “Uncaught TypeError: Cannot read property ‘classList’ of null”, the nav close button dose not function as well, I really don’t know why, would highly appreciate if some one help me to sort out this error. bests,

  4. Hello everyone. liked this development, but there is one drawback. How to remove information about the function of closing the book on the X?

  5. Wow!! Really lovely work. How can I learn to build sites like This. Please do you have anything on parallax scrolling effect.. Thanks, you are the best

  6. Hello. I love this plugin and incorporated it onto my site. The only issue I am having is in Chrome. When I turn the page, the page flickers.. Any idea what I should do? Thanks!

    • Hi Kyle, the bookblock.css needed to be updated. You can download the ZIP file again, it should work fine now. The GitHub repo is also updated. Thanks for the feedback and let us know if it works for you. Cheers, ML

    • Got it thanks! Changed the css to this .bb-page > div,
      .bb-inner {
      position: absolute;
      height: 100%;
      width: 100%;
      top: 0;
      left: 0;

      .bb-outer {background:#FFF;}

      .bb-outer {
      -webkit-backface-visibility: hidden;
      -moz-backface-visibility: hidden;
      backface-visibility: hidden;


      in boookblock.css

  7. Awesome, good job, MARY LOU
    Do you have email, i have some ideal with discuss with you!

  8. Mary Lou, thank you! You have quite literally changed my life. I am so very grateful for what you do and what you’ve given me.
    Here’s a comment for the readers:
    If you find that the x button is not working to close the book after you have “looked inside”, make sure that you have included the
    from ABOVE the Codrops header.
    Hope this helps…

  9. Thank You!!!! I am learning the code and hope to embed this item on my next proyect!!! 😀


  11. Hi Mary,
    I just love your work!

    I’m trying to implement the book in RTL website where the pages need to go from right to left (first page on the right)
    I’ve been trying to to so for the last couple of hours but unfortunately with no success.

    I would really appreciate your help