[Solved] full width tile gallery

[wiseboss]

Hello guys, i need your help really bad.
i don’t consider my self an expect in CSS but im not a beginner either
yet i have this problem i just cant find a solution to alone.

Here is the deal:

I am making a gallery it must be full width, each item is 25% width
and i want to make an over lay with a link and a description
yet i cant find a way to make that overlay auto adjust to the height of the changing item tiles

here is exactly what im trying to remake :
http://yokko.aisconverse.com/start_portfolio.html
(the portfolio below)

If you can make me a small tutorial here on how to replicate this design it will save my life !

[Senff]

Can you show us what you’ve done so far?

[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.

[wiseboss]

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

[wiseboss]

Yes! it worked thank you so much!

[wiseboss]

Sorry to bother you again, hehe
it seems that display:table; for the a element
and the display:table-cell; for h6 and small elements just bring back that problem.

they don’t want to align in the center of the the list item.
the auto height for the a element works perfectly as long as its not display:table;
do you have any idea how to center that text vertically and horizontally with out damaging the a elements ability to auto stretch in height ?

.mask {position:absolute; display:table; width:100%; height:100%; left:0px; top:0; background-color: rgba(34,34,34,.65);
opacity: 0; text-align:center;}
.mask:hover {opacity: 1;}

.mask > h6 {display: table-cell; vertical-align: middle;}

http://codepen.io/anon/pen/VYKGQw

[wiseboss]

I dont know if it did it right but can you tell me what do you think about this?

http://codepen.io/anon/pen/dPpgMX

also take a look at this website that i gave before
http://yokko.aisconverse.com/start_portfolio.html

i made it look quite similar but the question is did i do it right ?

P.S : try and resize the browser window

[wiseboss]

The thing is im trying to replicate it exactly, not just “inspiration”
I’ve checked the CSS sheet from that website and for some unknown reason it works with tables

yet when i replicate that code, it just doesn’t.
you can check it for your self maybe you’ll understand it better then i do, im no where near an expert, i do sometimes find solutions like i did just now, but its not a near perfect solution.

I know i kinda brainwashed you with this im really sorry.

[Author]

Posts