Need design element to indicate that hidden options are available

Question

My webpage consists of a series of elements (books, let's say), each with an image and title:

http://jsfiddle.net/LjFx4/2/

When you click on a book, it goes to the relevant webpage.

What I need is a way to show the more-options box for a book. In other words, what design element should the books have to make them go from the main view to the option view? (The jsfiddle shows both views.)

The size of each book on a desktop is fairly big (160px). The size on a mobile fits 2 across on an iPhone in portrait mode.

I thought of:

• hover: but then they would all switch as the user moved his mouse across to get to a specific book. Or maybe just hover in a specific spot? But where? There are, btw, already 3 dots on the lower right. When the user hovers here, the book description pops up.

• a + sign: But this is ugly and crowded?

• a little tab sticking out in the bottom left. This was ugly and broke the 'pretty' look, perhaps more so because the books 'float' off the page a bit, but the tab was flat.

EDIT: The extra options are actually edit, remove, add to favorites, add to list, and maybe another one. So I would like for them to be hidden with a single show option, as opposed to them being visible all the time.

Answer 1

So the books have two navigational options.

1. Going to a relevant webpage
2. Showing more options

Your hover suggestion won't work on mobile. And if the "extra options" are just edit and remove I wouldn't show this on hover. People could accidentally click remove when they just wanted to navigate to a relevant page.

If the extra options really are edit and remove I would add some sort of edit button. When designed right, it shouldn't have to be ugly or crowded.

When you said books, I first thought extra options would be something like extra information. I was going to suggest a flip after clicking the book and show a button in the extra information that links to the relevant webpage. Maybe this suggestion still applies.

I recently came across some links you might be interested in. It's good inspiration:
http://tympanus.net/Development/BookPreview/
http://tympanus.net/Development/AnimatedBooks/
http://tympanus.net/Development/3DBookShowcase/index.html

Edit

Then what about this. First image: no click. Second image: click, options are shown and user is able to navigate to relevant webpage. Third image: click, options are shown on top of the image (image is darkened).

^{download bmml source – Wireframes created with Balsamiq Mockups}

The third option prevents the clicked element of being larger than the rest of the elements, because that might screw up the grid. Google handled a similar matter on an ingenius way.

Answer 2

I think something like the link posted is best

http://tympanus.net/Development/BookPreview/

Having small, unobstrusive icons or text links below the title means they are easily discoverable across all devices, because they don't rely on hover states to be visible.

Paul posted this image:

The second state is ideal, however it should not rely on hover states - these icons should always be visible.

The other consideration is to make sure these icons and controls are usable on tablet/mobile - so making them large enough to be touched easily is critical. LukeW has a great article about minimum touch sizes, which also applies to devices with high PPI:

Touch Target Sizes

Finally, ensure your delete option has a confirmation or undo option.