Forums

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
    Posts
  • #191690
    wiseboss
    Participant

    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 !

    #191691
    Senff
    Participant

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

    #191692
    wiseboss
    Participant

    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.

    #191698
    wiseboss
    Participant

    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

    #191718
    wiseboss
    Participant

    Yes! it worked thank you so much!

    #191726
    wiseboss
    Participant

    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

    #191739
    wiseboss
    Participant

    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

    #191742
    wiseboss
    Participant

    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.