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
Spartacus The Television Series
Spartacus The Television Series
soccer-europe.com
soccer-europe.com
concept clothing wear
concept clothing wear
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;
}