- This topic is empty.
Viewing 7 posts - 1 through 7 (of 7 total)
Viewing 7 posts - 1 through 7 (of 7 total)
- The forum ‘CSS’ is closed to new topics and replies.
The forums ran from 2008-2020 and are now closed and viewable here as an archive.
I have a thumbnail grid and I would like to apply hover effects to each image, where a descriptive text box will appear overlaid onto each thumbnail (a bit like this site). The code shown below is working, but when I wrap each image in a div the height of the images messes up. This has been driving me crazy!
Can anyone point me in the right direction? Any help would be much appreciated!
(also my site can be seen here)
For starters, you’re declaring an unordered list but have no list items.
I’d just kill the ul altogether.
I had no problem wrapping the images in divs – can you show us your attempt at that?
If you want text to go along with an image, I suggest not using divs but wrapping the images in figure and figcaption elements
I havent used figure elements before, great suggestion Paulie!
However, a little annoying glitch happens when hovering on the images second from far left… a 1px right border appears when the browser is at some widths. Any ideas why this is?
You may have to resize your browser a couple of times to see this glitch – my site is here.
Thanks for helping me out guys!
I think it’s caused by the 33.3% widths that get applied to the figures at certain sizes. That leaves 0.1% unaccounted for so it has to go somewhere.
Of course I could be wrong.
I dont think so, it occurs when the 4 figures are set at 25% and this didn’t happen on hover previously. Anyway this is a separate issue, I’l have a play and start a new discussion if I don’t get anywhere.
Thanks for your help, I appreciate it.
No problem, glad I could help.