Hi, all!
Happy to have found this place! 
I have a CSS image grid and I would like to make interactive content appear on hover, like this:
But I would like to:
a) Use CSS-only for the effect, if possible. (It looks like it might be a content card that appears on top of the image?)
b) Place interactive links and/or other content on the hover card, if possible.
These are the parts where Iāve hit a snag! Any help is appreciated. Thank you!
~E
As a starting point, so we are not starting from scratch, can you share what you have so far?
It should be possible with css only, though the example relies on javascript.
The basic principle is that you create the extra content as a sub element of the item, but it is initially hidden.
Then using a selector with the :hover pseudo class on the parent item and the class of the extra content, you change it to being visible.
Simplified example:-
.parent_item .extra_content {
display: none;
}
.parent_item:hover .extra_content {
display: block;
}
You may not want to do hover effects if you expect a large segment of your audience will access your page via mobile. Mobile devices are behind the curve when it comes to hover effects (meaning, putting a finger over a hover object will cause a āclickā event, and a hover effect will not be executed.
Interesting point. So what would you recommend if I have info to display?
So, the second ācardā (if that is what it is?) would be what is styled by ā.extra_contentā?
You would make the card appear by hover and/or click.
What is the āsecond cardā? Only one card appears in your example.
Well, I guess thatās what Iām confused about. What is it that appears over top of the card when I hover? A menu? A card? Is that what the JavaScript makes?
Also, I understand I would need honer or click, but you said you donāt recommend it for mobile devices. What would you suggest in that case?
No the extra information is the html that is already in the page except that you have hidden it initially. When you hover the image the information is revealed as shown in Samās post above.
As mobile doesnāt really understand :hover you need to apply a click routine to provide the same effect as the hover (some mobiles will treat a āfirst touchā as a hover effect but that usually causes more problems than it solves because you canāt then get rid of the touch effect because it isnāt transient).
For touch I would usually detect if touch is present and supply some js to activate a class change when touched and avoid the hover issue altogether. I would also add a class to the html element to show whether touch is enabled and remove a hover class at the same time. In this way hover interactions are not duplicated by mobiles that understand a first touch as hover.
Hereās a very quick rough and ready demo with all the elements in place. Just view source to see the complete code. Most of the js is borrowed snippets which Iām sure the JS forum could tidy up a bit if needed.
http://www.pmob.co.uk/temp2/touch-hover2.html
Note that all the js does is switch classes as required; itās the css and html does all the heavy lifting.
Hereās a codepen to play width:
Yes, thatās the class for the content which is initially hidden, then revealed on hover. In Paulās example the class is .overlay.
Paul, this is Super slick! I get it now. Sheesh, I was so obtuse on how this worked, haha. But now I see it easily. My question, then, would go back to: how can I (or can I) implement this effect without any JS?
It will work without javascript, except for the hover effect on touch devices. The js was just added to cope with that particular issue.
Yes as Sam said it will work out of the box on desktops.
You can remove the js and then it will still work on most touch devices but as I said originally you will not be able to dismiss the current overlay until you click on something else.
http://www.pmob.co.uk/temp2/xhover2.html
(Test on mobile)
Understood. Thank you, everyone for this help!
This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.