1

I need the image cards to align like pinterest. I have attached an image of what I am trying to get it to do.

enter image description here

================================================== Project Images ================================================== -->

.project-images .section-heading .title {
    padding-bottom: 0px;
    font-size: 250%;
    line-height: 1.1;
    font-weight: 400;
    color: #1c1c1c;
    text-transform: uppercase;
    }

    .project-images {
    padding: 80px
    }

    .project-imgsub {
    padding-bottom: 50px;
    margin-top: 0;
    color: #666;
    font-size: 30px;
    font-weight: 700;
    letter-spacing: 1px;
    }


    .project-images .service-parts .block {
    margin-bottom: 0px;
    text-align: center;
    }

    .project-images .service-parts .block i {
    font-size: 35px;
    color: #00bfff;
    }
    .project-images .service-parts .block p {
    padding: 0 8px;
    font-size: 14px;
    color: #777;
    line-height: 1.7;
    }
    .project-images figure .buttons {
    position: absolute;
    top: 45%;
    left: 13%;
    }

    .project-images h2 {
    padding: 20px;
    }

    .project-images .img-cust {
    display: inline-block;
    }

    figure {
    background: #fff;
    margin-bottom: 45px;
    box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.22), 0 2px 10px 0 rgba(0, 0, 0, 0.22);
    }
    figure .img-wrapper {
    position: relative;
    overflow: hidden;
    }
    figure img {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
    -webkit-transition: -webkit-transform 400ms;
    transition: transform 400ms;
    }

    figure:hover img {
    -webkit-transform: scale3d(1.2, 1.2, 1);
    transform: scale3d(1.2, 1.2, 1);
    }
<section class="project-images">
    <div class="container">
        <div class="section-heading">
            <h3 class="title wow fadeInDown" data-wow-delay=".3s">  TEXT </h3>
            <h3 class="project-imgsub">Images and Details</h3>
            <div class="row">
                <div class="col-sm-4 ">
                    <figure class="wow fadeInLeft animated portfolio-item" data-wow-duration="500ms" data-wow-delay="0ms">
                        <figcaption>
                            <h2>TITLE TEXT</h2>
                            <p class="para">
                                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam ac laoreet magna, nec posuere leo. Aenean justo nibh, ultricies consequat faucibus in, molestie vel metus. Pellentesque dignissim, nisl in luctus ornare, ex est tristique eros, sed auctor diam justo et tellus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque lobortis nibh a nisl malesuada scelerisque. Vivamus malesuada nisi nisi, eu tempor ipsum finibus vitae. Ut at leo lacus.
                            </p>
                        </figcaption>
                        <div class="img-wrapper">
                            <img src="images/hid.png " class="img-responsive" >
                        </div>
                                    
                        </figure>
                </div>
                <div class="row">
                    <div class="col-sm-4 ">
                        <figure class="wow fadeInLeft animated portfolio-item" data-wow-duration="500ms" data-wow-delay="0ms">
                            <figcaption>
                                <h2>TITLE Text text text text</h2>
                                <p class="para">
                                    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam ac laoreet magna, nec posuere leo. Aenean justo nibh, ultricies consequat faucibus in, molestie vel metus. Pellentesque dignissim, nisl in luctus ornare, ex est tristique eros, sed auctor diam justo 
                                </p>
                            </figcaption>
                            <div class="img-wrapper">
                                <img src="images/hid.png " class="img-responsive" >
                            </div>
                        </figure>
                    </div>

                    <div class="row">
                        <div class="col-sm-4 ">
                            <figure class="wow fadeInLeft animated portfolio-item" data-wow-duration="500ms" data-wow-delay="0ms">
                                <figcaption>
                                    <h2> TITLE Text tex text</h2>
                                    <p class="para">
                                        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam ac laoreet magna, 
                                    </p>
                                </figcaption>
                                <div class="img-wrapper">
                                    <img src="images/hid.png " class="img-responsive" >
                                </div>
                            </figure>
                        </div>
                        <div class="row">
                            <div class="col-sm-4">
                                <figure class="wow fadeInLeft animated portfolio-item res-wall" data-wow-duration="500ms" data-wow-delay="0ms">
                                    <figcaption>
                                        <h2>TITLE Text text  text text</h2>
                                              
                                        <p class="para">
                                        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam ac laoreet magna, nec posuere leo. Aenean justo nibh, ultricies consequat faucibus in, molestie vel metus. Pellentesque dignissim, nisl in luctus ornare, ex est tristique eros, sed auctor diam justo et tellus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque lobortis nibh a nisl malesuada scelerisque. Vivamus malesuada 
                                        <p>
                                    </figcaption>
                                    <div class="img-wrapper">
                                        <img src="images/hid.png " class="img-responsive" >        
                                    </div>    
                                </figure>
                            </div> 
                            <div class="row">
                                <div class="col-sm-4">
                                    <figure class="wow fadeInLeft animated portfolio-item res-wall" data-wow-duration="500ms" data-wow-delay="0ms">
                                        <figcaption>
                                            <h2>TITLE TEXT TEXT  TEXT</h2>
                                            <p class="para">
                                                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam ac laoreet magna, nec posuere leo. Aenean justo nibh, ultricies consequat faucibus in, molestie vel metus. Pellentesque dignissim, nisl in luctus ornare, ex est tristique eros, sed auctor diam justo et tellus. Lorem ipsum dolor sit amet, consectetur               
                                            </p>
                                        </figcaption>
                                        <div class="img-wrapper">
                                            <img src="images/hid.png " class="img-responsive" >
                                        </div>
                                    </figure>
                                </div>
                                          
                                <div class="row">
                                    <div class="col-sm-4">
                                        <figure class="wow fadeInLeft animated portfolio-item" data-wow-duration="500ms" data-wow-delay="0ms">
                                            <figcaption>
                                                <h2> TITLE TEXT TEXT </h2>
                                                <p class="para">
                                                    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam ac laoreet magna, 
                                                </p>
                                            </figcaption>
                                            <div class="img-wrapper">
                                                <img src="images/hid.png " class="img-responsive" >
                                                     
                                            </div>
                                        </figure>
                                    </div>
                                </div>         
                            </div>  
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>
Kyle Bradley
  • 141
  • 1
  • 10
Classics07
  • 127
  • 1
  • 1
  • 9

1 Answers1

-1

JSFiddle

If you want the layout in the image it is called a Masonry layout mentioned here - how-to-create-grid-tile-view-with-css also here - css-floating-divs-at-variable-heights both answers suggest using jQuery Masonry but you could also use columns.

But as an alternative you could use equal height columns like I have done in the code below.

div {
  -webkit-column-count: 3; /* Chrome, Safari, Opera */
  -moz-column-count: 3; /* Firefox */
  column-count: 3;
}


.flex{
  display: flex;
  flex-wrap: wrap;
  margin: auto;

}
.col-sm-4{
  max-width: 100%;
  width: 33%;
  display: flex;
}
.project-images .section-heading .title {
    padding-bottom: 0px;
    font-size: 250%;
    line-height: 1.1;
    font-weight: 400;
    color: #1c1c1c;
    text-transform: uppercase;
    }

    .project-images {
    padding: 80px
    }

    .project-imgsub {
    padding-bottom: 50px;
    margin-top: 0;
    color: #666;
    font-size: 30px;
    font-weight: 700;
    letter-spacing: 1px;
    }


    .project-images .service-parts .block {
    margin-bottom: 0px;
    text-align: center;
    }

    .project-images .service-parts .block i {
    font-size: 35px;
    color: #00bfff;
    }
    .project-images .service-parts .block p {
    padding: 0 8px;
    font-size: 14px;
    color: #777;
    line-height: 1.7;
    }
    .project-images figure .buttons {
    position: absolute;
    top: 45%;
    left: 13%;
    }

    .project-images h2 {
    padding: 20px 20px 0px 20px;
    text-align: center;
    margin-bottom: 0;
    }

    .project-images .img-cust {
    display: inline-block;
    }
    
    p.para {
    padding: 0 20px 0 20px;
    text-align: center;
}

figure {
    background: #fff;
    box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.22), 0 2px 10px 0 rgba(0, 0, 0, 0.22);
    -webkit-margin-end: 0;
    -webkit-margin-start: 0;
    -webkit-margin-before: 0em;
    -webkit-margin-after: 0em;
    margin: 10px 10px 5px 10px;
  }
    figure .img-wrapper {
    position: relative;
    overflow: hidden;
    }
    figure img {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
    -webkit-transition: -webkit-transform 400ms;
    transition: transform 400ms;
    width: 100%;
    max-width: 100%;
    }

    figure:hover img {
    -webkit-transform: scale3d(1.2, 1.2, 1);
    transform: scale3d(1.2, 1.2, 1);
    }
<section class="project-images">
    <div class="container">
        <div class="section-heading">
            <h3 class="title wow fadeInDown" data-wow-delay=".3s">  TEXT </h3>
            <h3 class="project-imgsub">Images and Details</h3>
            <div class="row flex">
                <div class="col-sm-4 ">
                    <figure class="wow fadeInLeft animated portfolio-item" data-wow-duration="500ms" data-wow-delay="0ms">
                        <figcaption>
                            <h2>TITLE TEXT</h2>
                            <p class="para">
                                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam ac laoreet magna, nec po
                            </p>
                        </figcaption>
                        <div class="img-wrapper">
                            <img src="" alt="img-here" class="img-responsive" >
                        </div>
                                    
                        </figure>
                  </div>
              <div class="col-sm-4 ">
                    <figure class="wow fadeInLeft animated portfolio-item" data-wow-duration="500ms" data-wow-delay="0ms">
                        <figcaption>
                            <h2>TITLE TEXT</h2>
                            <p class="para">
                                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam ac laoreet magna, nec posuere leo. Aenean justo nibh, ultricies consequat faucibus in, molestie vel metus. Pellentesque dignissim, nisl in luctus ornare, ex est tristique er
                            </p>
                        </figcaption>
                        <div class="img-wrapper">
                            <img src="" alt="img-here" class="img-responsive" >
                        </div>
                                    
                        </figure>
                  </div>
                  
                                <div class="col-sm-4 ">
                    <figure class="wow fadeInLeft animated portfolio-item" data-wow-duration="500ms" data-wow-delay="0ms">
                        <figcaption>
                            <h2>TITLE TEXT</h2>
                            <p class="para">
                                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam ac laoreet magna, nec posuere leo. Aenean justo nibh, ultricies consequat faucibus in, molestie vel metus. Pellentesque dignissim, nisl in luctus ornare, ex est tristiqu
                            </p>
                        </figcaption>
                        <div class="img-wrapper">
                            <img src="" alt="img-here" class="img-responsive" >
                        </div>
                                    
                        </figure>
                  </div>

                   <div class="col-sm-4 ">
                    <figure class="wow fadeInLeft animated portfolio-item" data-wow-duration="500ms" data-wow-delay="0ms">
                        <figcaption>
                            <h2>TITLE TEXT</h2>
                            <p class="para">
                                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam ac laoreet magna, nec posuere leo. Aenean justo nibh, ultricies consequat faucibus in, molestie vel metus. Pellentesque dignissim, nisl in luctus ornare, ex est tristiqu
                            </p>
                        </figcaption>
                        <div class="img-wrapper">
                            <img src="" alt="img-here" class="img-responsive" >
                        </div>
                                    
                        </figure>
                  </div>
                  
                                     <div class="col-sm-4 ">
                    <figure class="wow fadeInLeft animated portfolio-item" data-wow-duration="500ms" data-wow-delay="0ms">
                        <figcaption>
                            <h2>TITLE TEXT</h2>
                            <p class="para">
                                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam ac laoreet magna, nec posuere leo. Aenean justo nibh, ultricies consequat faucibus in, molestie vel metus. Pellentesque dignissim, nisl in luctus ornare, ex est tristiqu
                            </p>
                        </figcaption>
                        <div class="img-wrapper">
                            <img src="" alt="img-here" class="img-responsive" >
                        </div>
                                    
                        </figure>
                  </div>
                  
                                     <div class="col-sm-4 ">
                    <figure class="wow fadeInLeft animated portfolio-item" data-wow-duration="500ms" data-wow-delay="0ms">
                        <figcaption>
                            <h2>TITLE TEXT</h2>
                            <p class="para">
                                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam ac laoreet magna, nec posuere leo. Aenean justo nibh, ultricies consequat faucibus in, molestie vel metus. Pellentesque dignissim, nisl in luctus ornare, ex est tristiqu
                            </p>
                        </figcaption>
                        <div class="img-wrapper">
                            <img src="" alt="img-here" class="img-responsive" >
                        </div>
                                    
                        </figure>
                  </div>
            </div>
        </div>
    </div>
</section>
Community
  • 1
  • 1
Kyle Bradley
  • 141
  • 1
  • 10
  • some images are small and some are large, the smaller images leave a white space at the bottom of the image to make it the smae size in length as the other images instead of the images below moving up to be underneath the image – Classics07 Apr 19 '16 at 14:56