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.
http://codepen.io/rawksteady/pen/oHKiv
@Dennis, just add display: block; to the img tag.. http://codepen.io/ChrisPlz/pen/Dbtvo
display: block;
img
I believe you can also use vertical-align: bottom;
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'.
http://codepen.io/Paulie-D/pen/tfdBg
@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.
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.
http://codepen.io/rawksteady/pen/oHKiv
@Dennis, just add
display: block;to theimgtag.. http://codepen.io/ChrisPlz/pen/DbtvoI 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'.
http://codepen.io/Paulie-D/pen/tfdBg
@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.