Help me with this CSS problem

[delta]

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.

http://codepen.io/siiron/pen/bufei

[I.m.learning]

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;
http://www.creativebloq.com/css3/create-page-turn-effect-6126260

You can check out this turn.js fiddle
https://jsfiddle.net/hashem/uz3wo7L8/

You can download booklet
http://builtbywill.com/code/booklet/

See if this one gives you an idea
http://www.sitepoint.com/javascript-sprite-animation-using-jquery/

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.

[bearhead]

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

http://codepen.io/kvana/pen/NNLNVE

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

[Author]

Posts