Reply To: [Solved] full width tile gallery

[wiseboss]

well it goes like this for the html :

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

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.