HI there,
New here, since I ended up with ClassicPress as a possible replacement of Drupal 7. Running a website for art and poetry I’m looking for an option to show an image and on hover or click make it flip to text (poem) and on another click or ´undo mouse hover’ revert to the image again. Iǘe been looking into some plugins like Flipbox or Image hover, but can´t make those work as I want.
Anyone has ideas or tips? I’d be grateful …
Urgofrodel Heul
Although it sounds like a cool way to present the art or poetry, it is very limiting. It can also be quite annoying for a user, not only to have to click each one, but they can’t see the image and the text at the same time.
One of the problems an art site has is how to be found. You need all the text you can get for the search engines to bring traffic. The bounce rate is part of this, and people will bounce if the interface is annoying.
This can be done in a way that’s not annoying at all. Try the method described here: How To Create a Flip Card with CSS
The big advantage of a method like this is that it uses CSS only and no JavaScript.
Hi, thanks for your reply, and you may very well be correct in your perception. But timkaye may have offered the option that I’m looking for …
Hi timkaye,
Thanks for your reply. And after trying this out through the link you offered, this appears to be almost exactly what I’m looking for. But the CSS code needs some adaptation to allow for flexibility in image size and text size. Iḿ completely unfamiliar with CSS coding but do you have an idea how to contain that flexibility in the CSS code? I can easily limit width or height of the images I upload to my site. But almost always the text length is (considerably) more than the image height.
Any pointer where I can learn how to add that flexibility to the CSS code?
TIA
It’s hard to give that sort of advice without seeing your code in action on a site or in a CodePen (or something similar). But in the CSS, you could try setting the height to 300px (or, indeed, whatever suits you).
What you are calling an advantage is what makes it a bad thing. If you use CSS only, it is not accessible on mobile devices that have no hover.
And it doesn’t solve the problem of the user having to go to each one to read the text. The user would likely think there is nothing but images. And they still can’t see both the image and the text at the same time, not to mention two of the texts at the same time.
This “feature” is very limiting.
You are being strangely literal. I didn’t say to just copy and paste. I said it was a “method”, and that’s exactly what it is.
If the OP wants the same effect on mobile, then it’s easy to add :focus, or else replace :hover with :focus.
Hi, thanks for your critical input. Makes me look into my ideas a bit more. For me the present situation; showing the image and the text below, is not what Iḿ looking for. But you make me look into my present ideas once again, for which I’m grateful.
No you didn´t, but like I said, being totally unfamiliar with CSS coding I was looking for extra options. It seems that I will have to do some learning WRT CSS. 
My previous comment was intended for @joyously! If you swap in :focus for :hover, you will have something that is highly accessible. It can be accessed by tabbing, for example.
Tim, you are ignoring the other arguments I gave, and the fact that the text is limited to the size of the image and that Urgje just said they don’t know CSS enough to do it well.
What other arguments? There’s nothing to stop the site saying something at the top of the page like “Click on each image to reveal the text beneath.” The rest is stylistic choice, which is for the OP to decide on.
I didn’t know until after giving advice that @Urgje is not familiar with CSS. After all, Drupal was mentioned at the beginning, and that’s certainly not for beginners! But making the one change I’ve given is easy to do and produces perfectly accessible web content. As I said, the rest is a matter of stylistic choice.
Tim, other arguments:
The accessibility is not just about keyboard access, but for screen readers (search engines are the biggest user in that group).
Those are all design choices. Of course the reader can’t read the text and see the image at the same time: that’s the point!
There’s no lack of accessibility for screen readers if :focus is used. In fact, quite the contrary: it’s an excellent way to make accessible tooltips. Once the person tabs to it, the text can be read, just as with a link or menu item.