Gallery - mosiac/grid layout with filtering and information page popup

Discussion in 'HTML and CSS' started by bluedove, Apr 13, 2020.

  1. bluedove

    bluedove

    Joined:
    Apr 13, 2020
    Messages:
    1
    Likes Received:
    0
    Hello,

    I'm Christine, I have just started coding and I'm trying to create a gallery page for a website.
    I want to create a gallery like the one below. I want each image to have a hover effect that overlays with text two (two lines only)
    Annotation 2020-04-13 160123.jpg
    and when I click on each image I want it to pop-up onto a page similar to this so that the image is larger and there is some text information giving a longer explanation.

    Annotation 2020-04-13 161407.jpg
    This is the code I have so far, but I am not sure why it's not working properly.
    Can I do this with only html, css and javascript? I don't want to use bootstrap or a plugin.

    Code (HTML5):

    <!-- Portfolio section -->
            <div class="gallery-wraper">
                <h1>Portfolio</h1>
            <!-- Filtering buttons -->
                <div class="button-area">
                    <button class="button">
                        <input type="checkbox" value="portraits" />Portraits
                    </label>
                    <label class="button">
                        <input type="checkbox" value="product" />Product
                    </label>
                    <label class="button">
                        <input type="checkbox" value="portraits" />Portraits
                    </label>
                    <label class="button">
                        <input type="checkbox" value="portraits" />Portraits
                    </label>
                </div>
                <!-- Galley images -->
                <div class="gallery">
                    <div class="gallery-item">
                        <a href="">
                            <img src="img/woman-wearing-green-turban-3303918.jpg" alt="">
                            <div class="info">
                                <h5>Emily & Daniel</h5>
                               <p>Product photography</p>
                           </div>
                       </a>
                   </div>
                   <div class="gallery-item">
                       <a href="">
                           <img src="img/woman-wearing-green-turban-3303918.jpg" alt="">
                           <div class="info">
                               <h5>Emily & Daniel</h5>
                               <p>Product photography</p>
                           </div>
                       </a>
                   </div>
                   <div class="gallery-item">
                       <a href="">
                           <img src="img/woman-wearing-green-turban-3303918.jpg" alt="">
                           <div class="info">
                               <h5>Emily & Daniel</h5>
                               <p>Product photography</p>
                           </div>
                       </a>
                   </div>
                   <div class="gallery-item">
                       <a href="">
                           <img src="img/woman-wearing-green-turban-3303918.jpg" alt="">
                           <div class="info">
                               <h5>Emily & Daniel</h5>
                               <p>Product photography</p>
                           </div>
                       </a>
                   </div>
           </div>
     
    Code (CSS):

    CSS:
    /*PORFOLIO*/

    .gallery {
        display: grid;
        grid-template-columns: repeat (6, lfr);
        grid-gap: 1rem;
    }

    .gallery-item img{
        width: 100%;
        height: 100%;
        object-fit: cover;
    }
    .gallery-item:hover {
        background-color: rgba(63, 73, 83, 0.85);
        height: 100%;
        left: 0;
        opacity: 0;
        position: absolute;
        top: 0;
        text-align: center;
        width: 100%;
        /*transition: .5s ease;*/
    }

    .info {
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        height: 100%;
        width: 100%;
        opacity: 0;
        transition: .5s ease;
        background-color: rgba(63, 73, 83, 0.85);
    }
    .gallery-item:hover .info {
        position: absolute;
        text-align: center;
        top: 25%;
        width: 100%;
    }
    .gallery-item:hover, .overlay {
        opacity: 1;
    }
    .info h5, p{
        display: block;
        margin-block-start: 1em;
        margin-block-end: 1em;
        margin-inline-start: 0px;
        margin-inline-end: 0px;
        text-align: center;
        color: fff;
        font-size: 20px;
        position: absolute;
        top: 50%;
        left: 50%;
        -webkit-transform: translate(-50%, -50%);
        -ms-transform: translate(-80%, -50%);
        text-align: center;
    }

    .gallery-item:nth-child(1) {
        grid-column: span 4;
        grid-row: span 2;
    }

    .gallery-item:nth-child(2),
    .gallery-item:nth-child(3) {
        grid-column: span 2;
    }

    .gallery-item:nth-child(4),
    .gallery-item:nth-child(5) {
        grid-column: span 3;
    }

    .gallery-item h1 {
        font-family: Catamaran;
        font-size: 28px;
        font-weight: 600;
        color: #111;
        text-transform: uppercase;
        text-align: center;
        padding: 20px;
    }

    @media only screen and (max-width: 650px) {
        .gallery {
            display: block;
        }
        .gallery-item {
            margin-bottom: 1rem;
        }
     
        .gallery h1 {
            font-size: 28px;
        }
        *, *:before, *after {
        box-sizing: border-box;
        padding: 0;
        margin: 0;
        }

        /*.gallery-item .hover .info {
            top: 18%;
        }*/


        /*.gallery-img {
            flex-basis: 300px;
        }*/

    }

    /*Filter buttons*/
    .button-area filters{
      .button {
        display: inline-block;
        text-decoration: none;
        padding: 10px;
        margin: 30px 5px;
        background-color: rgba(#fff,0.2);
        border-radius: 3px;
        cursor: pointer;
        transition: all .3s ease;
        &:hover{
          background-color:rgba(#fff,0.32);
        }
        /* When the button is selected*/
        &.active{
          background-color: rgba(#fff,0.52);
          box-shadow: 0 0 8px rgba(#000, 0.6) inset;
        }
      }
      input[type=checkbox]{
        display:none;
      }

     
    Thanks for your help
    Christine
     
    Last edited by a moderator: Apr 15, 2020
    bluedove, Apr 13, 2020
    #1
    1. Advertisements

  2. bluedove

    sunfighter

    Joined:
    Nov 27, 2019
    Messages:
    102
    Likes Received:
    12
    Sorry I didn't get to you sooner bluedove, but I've been busy.
    The main reason your running into problems is because of the use of position: absolute;. It was horrible before css-grid, but using it in a grid is worst. Grid is suppose to be the savor so we never have to use position: absolute; again - except in rare cases. Just a simple layout for you. It does need work but hopfully this will help you understand :
    Code (Text):

    <!DOCTYPE html>
    <html>

    <head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <title>Page Title</title>
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <style>
    #grid {
      display: grid;
      grid-template-columns: 50em 20em;
      grid-template-rows: 15em 15em 30em;
      grid-gap: 1em;
      padding: 2em;
    }
    #item1 {
      background-color: lime;
      grid-column: 1/3;
      grid-row: span 2;
    }
    #item2 {
      background-color: yellow;
      grid-column: 3;
    }
    #item3 {
      background-color: blue;
      grid-column:  3;
    }
    #item4 {
      background-color: purple;
      grid-column:  1/3;
      grid-row:  3;
    }
    #item5 {
      background-color: pink;
      grid-column:  3;
      grid-row:  3;
    }
    </style>
    <body>
    <div id="grid">
      <div id="item1"></div>
     <div id="item2"></div>
      <div id="item3"></div>
      <div id="item4"></div>
      <div id="item5"></div>

    </div>
    </body>
    </html>
     
     
    sunfighter, Apr 18, 2020
    #2
    1. Advertisements

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments (here). After that, you can post your question and our members will help you out.