The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS Help me with this CSS problem

  • This topic is empty.
Viewing 3 posts - 1 through 3 (of 3 total)
  • Author
  • #240839

    I have this code pen and im wondering how I could get it to work differently. The code gets a book to open up when you hover over it, I was wondering how could I get the pages to open after clicking on the book. The problem with this is that I have to hold the mouse down to get it to work. I want the code to get the book to open with a single click, could :active, :onclick, and ::after work to get this done? How do I do this. I was wondering if somebody could get it to work that way.


    You have yourself quite the code. So many people have helped me along the way and like to make attempts to help others. However, I can only provide sources that will help you out.

    A majority of the people here know what they are doing; considering no one has responded yet, let me point you to some ideas. From my research, many use plugins like turn.js or booklet.js

    This site looks familiar to your code; however, it used transitions, but seems to be on the right path for your code;

    You can check out this turn.js fiddle

    You can download booklet

    See if this one gives you an idea

    I was going to have an animations page but with as many pages I had, it was easier just to allow my users to download to their computer, open in another page, and open in an iframe.

    I’m sure a few of the others on here know how to perform what you’re asking. I am a great researcher, not so good programmer…yet. Sorry I couldn’t help more. I’m still learning myself and know what it’s like not getting help, any help is better than being criticized like other sites.


    I’d recommend using js for this, you’re already suing jquery, so it’s not very complicated:

    Important to keep in mind that the .book:hover selectors (lines 509 to 552 in your css), will have to be changed to a class that gets toggled by javascript – I used .open

Viewing 3 posts - 1 through 3 (of 3 total)
  • The forum ‘CSS’ is closed to new topics and replies.