Ich brauche die Bildkarten zum Ausrichten wie pinterest. Ich habe ein Bild von dem, was ich versuche, zu tun.Ich brauche die Bildkarten zum Ausrichten wie pinterest
========================================= ========= Projektbilder ====================================== ============= ->
.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>
einige Bilder sind klein und einige groß sind, die kleineren Bilder lassen einen weißen Bereich am unteren Rand des Bildes es die smae Größe in der Länge wie die anderen Bilder zu machen, anstatt der folgenden Bilder bewegen sich nach unten, um unter dem Bild zu sein – Classics07