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

Home Forums CSS [Solved] full width tile gallery

  • This topic is empty.
Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
  • #191690

    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 :
    (the portfolio below)

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


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


    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.


    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


    Yes! it worked thank you so much!


    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;}


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

    also take a look at this website that i gave before

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

    P.S : try and resize the browser window


    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.

Viewing 8 posts - 1 through 8 (of 8 total)
  • The forum ‘CSS’ is closed to new topics and replies.