Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS Display caption after image enlarged on mouseover? Re: Display caption after image enlarged on mouseover?

#103521
Mottie
Member

First off, I would suggest using smaller background and thumbnail images… it was painful for me to watch them slowly load. The all of the images are 2 to 3Mb in size and don’t need to be a “png” type file, the “jpg” type will work just as well and be much smaller.

As for adding captions, change the “.pic” to a div wrapping a copy of both the img and figcaption. Then set the image dimension to be 100% width and height (Demo):

HTML

New CSS

#gallery ul li .pic img {
width: 100%;
height: 100%;
}

Modified CSS (only this line was changed)

#gallery ul li:hover .pic {
height: auto;
}