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

Home Forums CSS [Solved] full width tile gallery Reply To: [Solved] full width tile gallery


So this is the closest i got

#gallery {float:left; width:100%;}
#gallery ul {float:left; width:100%;}
#gallery ul li {position:relative; width: 25%; overflow: hidden;}
#gallery ul li img {float: left; width: 100%; display: block;}
.mask {position: absolute; width: 100%; height: auto; background-color: rgba(34,34,34,.65);
opacity: 0; text-align: center;}
.mask:hover {opacity: 1;}

I need the mask layer to automatically adjust for the height of the list item. Seems such a standard thing to do yet i have no idea how to achieve this