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


well it goes like this for the html :

<div id="gallery">
         <img src="img/work-1.jpg" alt="">
         <a href="#" class="mask">
            <small>small title</small>

And CSS:

#gallery {width:100%;}
#gallery ul {left: 0px; top: 0px; bottom: 0px; right: 0px; height:auto;}
#gallery ul li {position: relative; padding: 0; width: 25%; overflow: hidden;}
#gallery ul li img {float: left;}
.mask {position: absolute; left: 0; top: 0; width: 100.1%; display: table !important; background-color: rgba(34,34,34,.65);
opacity: 0; text-align: center; vertical-align: middle;}
.mask:hover {opacity: 1;}

I really don’t know what im doing with the CSS right now so don’t be surprised if it looks all weird and stuff
im just trying everything (including blindly copying from that website)

i doubt it will help you in any way, truth is i just couldn’t make it further then this.