My webpage consists of a series of elements (books, let's say), each with an image and title:
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.