Trying to make a simple, gracefully degrading “hover-this-thing-and-see-some-sort-of-description-thing” (If there is a name for these things let me know).
However, I keep getting some gaps below each item which, obviously, I don’t really want.
This reply has been reported for inappropriate content.
@Dennis, just add display: block; to the img tag.. http://codepen.io/ChrisPlz/pen/Dbtvo
I believe you can also use vertical-align: bottom;
There are number of solutions depending on what is being hovered so you don’t need all that extra mark-up.
It looks like you want an ‘overlay’ rather than a ‘tooltip’.
@ChrisP – Nice catch, it’s way to easy to get code blind!
@Paulie_D – Why I never thought of using the figure element is beyond me, definately the right way to go in this case!
The beauty of the figure/figcaption is that the text is readable by screen readers as well although the [alt] tag would work just as well.
You must be logged in to reply to this topic.
Search for Stuff
Browse the Archives
Get the Newsletter
... or get the RSS feed