I use Boostrap 5 and have these 4 Boxes, they are not cards. How can I get them at the same height? Content is dynamic.
You find the Codepen here:
https://codepen.io/Deluxe23/pen/gOXJWwG
Below is the HTML Code with just 2 Boxes. I can't post all because that's too much code for this Post. you'll see all 4 Boxes in the Codepen.
.box>.icon {
text-align: center;
position: relative;
}
.box>.icon>.image {
position: relative;
z-index: 2;
margin: auto;
width: 88px;
height: 88px;
border: 8px solid white;
line-height: 88px;
border-radius: 50%;
background: blue;
vertical-align: middle;
}
.box>.icon:hover>.image {
background: #333;
}
.box>.icon>.image>i {
font-size: 36px !important;
color: #fff !important;
}
.box>.icon:hover>.image>i {
color: white !important;
}
.box>.icon>.info {
margin-top: -24px;
background: rgba(0, 0, 0, 0.04);
border: 1px solid #e0e0e0;
padding: 40px 0 10px 0;
}
.box>.icon:hover>.info {
background: rgba(0, 0, 0, 0.04);
border-color: #e0e0e0;
color: white;
}
.box>.icon>.info>h3.title {
font-family: "Montserrat", sans-serif !important;
font-size: 1.25rem;
color: #222;
font-weight: 500;
}
.box>.icon>.info>p {
font-family: "Montserrat", sans-serif !important;
font-size: 16px;
color: #666;
line-height: 1.5em;
margin: 20px;
}
.box>.icon:hover>.info>h3.title,
.box>.icon:hover>.info>p,
.box>.icon:hover>.info>.more>a {
color: #222;
}
.box>.icon>.info>.more a {
font-family: "Montserrat", sans-serif !important;
font-size: 12px;
color: #222;
line-height: 12px;
text-transform: uppercase;
text-decoration: none;
}
.box>.icon:hover>.info>.more>a {
color: #fff;
padding: 6px 8px;
background-color: blue;
}
.box .space {
height: 30px;
}
<section style="background-color:#f7f7f7">
<div class="container">
<div class="row pt-mb-5 pt-lg-5 pb-mb-5 pb-lg-5">
<div class="col-6 col-sm-6 col-lg-3">
<div class="box ">
<div class="icon ">
<div class="image" style="padding-top:14px;line-height:0px;padding-left:2px"><img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGQAAABkAQAAAABYmaj5AAAAAnRSTlMAAHaTzTgAAAATSURBVBgZYxgFo2AUjIJRQFcAAAV4AAHcRQIbAAAAAElFTkSuQmCC" style="max-width:45px;max-height:45px" data-src="https://iili.io/EcctII.webp" decoding="async"
class="lazyload"><noscript><img src="https://iili.io/EcctII.webp" style="max-width:45px;max-height:45px" data-eio="l"></noscript></div>
<div class="info">
<h3 class="title">BoxHeadline 1</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed in lobortis nisl, vitae iaculis sapien. Phasellus ultrices gravida massa luctus ornare. Suspendisse blandit quam elit, eu imperdiet neque semper. massa luctus ornare. Suspendisse
blandit quam elit, eu imperdiet neque semper</p>
<div class="more">
<a href="/kontakt/" title="Title Link">
Mehr Informationen<i class="fa fa-angle-double-right"></i>
</a>
</div>
</div>
</div>
<div class="space"></div>
</div>
</div>
<div class="col-6 col-sm-6 col-lg-3">
<div class="box ">
<div class="icon ">
<div class="image" style="padding-top:14px;line-height:0px;padding-left:2px"><img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEsAAABLAQAAAAAQNUdHAAAAAnRSTlMAAHaTzTgAAAAQSURBVCjPY2AYBaNgFJAMAAM5AAELGjlgAAAAAElFTkSuQmCC" style="max-width:45px;max-height:45px" data-src="https://iili.io/EcctII.webp" decoding="async"
class="lazyload"><noscript><img src="https://iili.io/EcctII.webp" style="max-width:45px;max-height:45px" data-eio="l"></noscript></div>
<div class="info">
<h3 class="title">BoxHeadline 2</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed in lobortis nisl, vitae iaculis sapien. Phasellus ultrices gravida massa luctus ornare. Suspendisse blandit quam elit, eu imperdiet neque semper. </p>
</div>
</div>
<div class="space"></div>
</div>
</div>
</div>
</div>
</section>
I changed your markup around a bit and changed the only CSS needed to still maintain the design but get the heights to work, so if there is a style I missed like a font decoration you'll have to re-add that. Basically what I did is put the background and border color on box instead of info because the box is the containing div of all children (including info), so it makes sense for that one to have those styles.
Second, because when you resize horizontally your columns do not have a min-width with a breaking point set for them to go to a new line, you should set your min-height for all box's at the largest rendered height. In your case, it is box #3 with the long p text.
See the text taking the full height at the lower browser width, because all other boxes have that same min-height they will always match.
See it working here:
.icon {
text-align: center;
position: relative;
background: rgba(0, 0, 0, 0.04);
border: 1px solid #e0e0e0;
margin-top: -24px;
padding: 40px 0 0 0;
min-height: 100%;
}
.col-6>.image {
position: relative;
z-index: 2;
margin: auto;
width: 88px;
height: 88px;
border: 8px solid white;
line-height: 88px;
border-radius: 50%;
background: blue;
vertical-align: middle;
}
.col-6:hover>.image {
background: #333;
}
.info {
min-height: inherit;
}
.box {
height: 100%;
}
section {
height: 100vh;
}
.image>i {
font-size: 36px !important;
color: #fff !important;
}
.col-6:hover>.image>i {
color: white !important;
}
.box>.icon:hover>.info {
background: rgba(0, 0, 0, 0.04);
border-color: #e0e0e0;
color: white;
}
.box>.icon>.info>h3.title {
font-family: "Montserrat", sans-serif !important;
font-size: 1.25rem;
color: #222;
font-weight: 500;
}
.info>p {
font-family: "Montserrat", sans-serif !important;
font-size: 16px;
color: #666;
line-height: 1.5em;
margin: 10px;
}
.icon:hover>.info>h3.title,
.icon:hover>.info>p,
.icon:hover>.info>.more>a {
color: #222;
}
.box>.info>.more a {
font-family: "Montserrat", sans-serif !important;
font-size: 12px;
color: #222;
line-height: 12px;
text-transform: uppercase;
text-decoration: none;
}
.icon:hover .info .more>a {
color: #fff;
padding: 6px 8px;
background-color: blue;
}
.box .space {
height: 30px;
}
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
<section style="background-color:#f7f7f7">
<div class="container">
<div class="row pt-mb-5 pt-lg-5 pb-mb-5 pb-lg-5">
<div class="col-6 col-sm-6 col-lg-3 mb-2">
<div class="image" style="line-height:0px;padding-left:2px"><img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGQAAABkAQAAAABYmaj5AAAAAnRSTlMAAHaTzTgAAAATSURBVBgZYxgFo2AUjIJRQFcAAAV4AAHcRQIbAAAAAElFTkSuQmCC" style="max-width:45px;max-height:45px" data-src="https://iili.io/EcctII.webp" decoding="async"
class="lazyload"><noscript><img src="https://iili.io/EcctII.webp" style="max-width:45px;max-height:45px" data-eio="l"></noscript></div>
<div class="icon ">
<div class="box">
<div class="info">
<h3 class="title">BoxHeadline 1</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed in lobortis nisl, vitae iaculis sapien. Phasellus ultrices gravida massa luctus ornare. Suspendisse blandit quam elit, eu imperdiet neque semper. massa luctus ornare. Suspendisse
blandit quam elit, eu imperdiet neque semper</p>
<div class="more">
<a href="/kontakt/" title="Title Link">
Mehr Informationen<i class="fa fa-angle-double-right"></i>
</a>
</div>
</div>
</div>
<div class="space"></div>
</div>
</div>
<div class="col-6 col-sm-6 col-lg-3 mb-2">
<div class="image" style="padding-top:14px;line-height:0px;padding-left:2px"><img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEsAAABLAQAAAAAQNUdHAAAAAnRSTlMAAHaTzTgAAAAQSURBVCjPY2AYBaNgFJAMAAM5AAELGjlgAAAAAElFTkSuQmCC" style="max-width:45px;max-height:45px" data-src="https://iili.io/EcctII.webp" decoding="async"
class="lazyload"><noscript><img src="https://iili.io/EcctII.webp" style="max-width:45px;max-height:45px" data-eio="l"></noscript></div>
<div class="icon ">
<div class="box">
<div class="info">
<h3 class="title">BoxHeadline 2</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed in lobortis nisl, vitae iaculis sapien. Phasellus ultrices gravida massa luctus ornare. Suspendisse blandit quam elit, eu imperdiet neque semper. </p>
</div>
</div>
<div class="space"></div>
</div>
</div>
<div class="col-6 col-sm-6 col-lg-3 mb-2">
<div class="image" style="padding-top:14px;line-height:0px;padding-left:2px"><img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEsAAABLAQAAAAAQNUdHAAAAAnRSTlMAAHaTzTgAAAAQSURBVCjPY2AYBaNgFJAMAAM5AAELGjlgAAAAAElFTkSuQmCC" style="max-width:45px;max-height:45px" data-src="https://iili.io/EcctII.webp" decoding="async"
class="lazyload"><noscript><img src="https://iili.io/EcctII.webp" style="max-width:45px;max-height:45px" data-eio="l"></noscript></div>
<div class="icon ">
<div class="box ">
<div class="info">
<h3 class="title">BoxHeadline 3</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed in lobortis nisl, vitae iaculis sapien. Phasellus ultrices gravida massa luctus ornare. Suspendisse blandit quam elit, eu imperdiet neque semper. ultrices gravida massa luctus
ornare. Suspendisse blandit quam elit, eu imperdiet neque semper. ultrices gravida massa luctus ornare. Suspendisse blandit quam elit, eu imperdiet neque semper. </p>
</div>
</div>
<div class="space"></div>
</div>
</div>
<div class="col-6 col-sm-6 col-lg-3 mb-2">
<div class="image" style="padding-top:14px;line-height:0px;padding-left:2px"><img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGQAAABkAQAAAABYmaj5AAAAAnRSTlMAAHaTzTgAAAATSURBVBgZYxgFo2AUjIJRQFcAAAV4AAHcRQIbAAAAAElFTkSuQmCC" style="max-width:45px;max-height:45px" data-src="https://iili.io/EcctII.webp" decoding="async"
class="lazyload"><noscript><img src="https://iili.io/EcctII.webp" style="max-width:45px;max-height:45px" data-eio="l"></noscript></div>
<div class="icon ">
<div class="box ">
<div class="info">
<h3 class="title">BoxHeadline 4</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed in lobortis nisl, vitae iaculis sapien. Phasellus ultrices gravida massa luctus ornare. Suspendisse blandit quam elit, eu imperdiet neque semper. </p>
</div>
</div>
<div class="space"></div>
</div>
</div>
</div>
</div>
</section>
Add Class Like
<div class="col-6 col-sm-6 col-lg-3">
<div class="box h-100"> /* Add Class Here*/
<div class="icon h-100 d-flex flex-column"> /* Add Class Here*/
<div class="image" style="padding-top:14px;line-height:0px;padding-left:2px"><img src="data:/EcctII.webp" decoding="async" class="lazyload"><noscript><img src="https://iili.io/EcctII.webp" style="max-width:45px;max-height:45px" data-eio="l"></noscript></div>
<div class="info flex-fill"> /* Add Class Here*/
<h3 class="title">BoxHeadline 4</h3>
Please update by this code. We make full height using height : 100%
.box > .icon { text-align: center; position: relative; }
.box > .icon > .image { position: relative; z-index: 2; margin: auto; width: 88px; height: 88px; border: 8px solid white; line-height: 88px; border-radius: 50%; background: blue; vertical-align: middle; }
.box > .icon:hover > .image { background: #333; }
.box > .icon > .image > i { font-size: 36px !important; color: #fff !important; }
.box > .icon:hover > .image > i { color: white !important; }
.box > .icon > .info { margin-top: -24px; padding: 40px 0 10px 0; }
.box > .icon:hover > .info { border-color: #e0e0e0; color: white; }
.box > .icon > .info > h3.title { font-family: "Montserrat",sans-serif !important; font-size: 1.25rem; color: #222; font-weight: 500; }
.box > .icon > .info > p { font-family: "Montserrat",sans-serif !important; font-size: 16px; color: #666; line-height: 1.5em; margin: 20px;}
.box > .icon:hover > .info > h3.title, .box > .icon:hover > .info > p, .box > .icon:hover > .info > .more > a { color: #222; }
.box > .icon > .info > .more a { font-family: "Montserrat",sans-serif !important; font-size: 12px; color: #222; line-height: 12px; text-transform: uppercase; text-decoration: none; }
.box > .icon:hover > .info > .more > a { color: #fff; padding: 6px 8px; background-color: blue; }
.box .space { height: 30px; }
.box {
position: relative;
height: 100%;
background: #ddd;
}
.box:hover{background: rgba(0, 0, 0, 0.04); }
.col-6{ margin-bottom:20px;}
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
<section style="background-color:#f7f7f7">
<div class="container">
<div class="row pt-mb-5 pt-lg-5 pb-mb-5 pb-lg-5">
<div class="col-6 col-sm-6 col-lg-3">
<div class="box ">
<div class="icon ">
<div class="image" style="padding-top:14px;line-height:0px;padding-left:2px"><img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGQAAABkAQAAAABYmaj5AAAAAnRSTlMAAHaTzTgAAAATSURBVBgZYxgFo2AUjIJRQFcAAAV4AAHcRQIbAAAAAElFTkSuQmCC" style="max-width:45px;max-height:45px" data-src="https://iili.io/EcctII.webp" decoding="async" class="lazyload"><noscript><img src="https://iili.io/EcctII.webp" style="max-width:45px;max-height:45px" data-eio="l"></noscript></div>
<div class="info">
<h3 class="title">BoxHeadline 1</h3>
<p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed in lobortis nisl, vitae iaculis sapien. Phasellus ultrices gravida massa luctus ornare. Suspendisse blandit quam elit, eu imperdiet neque semper. massa luctus ornare. Suspendisse blandit quam elit, eu imperdiet neque semper</p>
</p>
<div class="more">
<a href="/kontakt/" title="Title Link">
Mehr Informationen<i class="fa fa-angle-double-right"></i>
</a>
</div>
</div>
</div>
<div class="space"></div>
</div>
</div>
<div class="col-6 col-sm-6 col-lg-3">
<div class="box ">
<div class="icon ">
<div class="image" style="padding-top:14px;line-height:0px;padding-left:2px"><img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEsAAABLAQAAAAAQNUdHAAAAAnRSTlMAAHaTzTgAAAAQSURBVCjPY2AYBaNgFJAMAAM5AAELGjlgAAAAAElFTkSuQmCC" style="max-width:45px;max-height:45px" data-src="https://iili.io/EcctII.webp" decoding="async" class="lazyload"><noscript><img src="https://iili.io/EcctII.webp" style="max-width:45px;max-height:45px" data-eio="l"></noscript></div>
<div class="info">
<h3 class="title">BoxHeadline 2</h3>
<p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed in lobortis nisl, vitae iaculis sapien. Phasellus ultrices gravida massa luctus ornare. Suspendisse blandit quam elit, eu imperdiet neque semper. </p>
</p>
</div>
</div>
<div class="space"></div>
</div>
</div>
<div class="col-6 col-sm-6 col-lg-3">
<div class="box ">
<div class="icon ">
<div class="image" style="padding-top:14px;line-height:0px;padding-left:2px"><img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEsAAABLAQAAAAAQNUdHAAAAAnRSTlMAAHaTzTgAAAAQSURBVCjPY2AYBaNgFJAMAAM5AAELGjlgAAAAAElFTkSuQmCC" style="max-width:45px;max-height:45px" data-src="https://iili.io/EcctII.webp" decoding="async" class="lazyload"><noscript><img src="https://iili.io/EcctII.webp" style="max-width:45px;max-height:45px" data-eio="l"></noscript></div>
<div class="info">
<h3 class="title">BoxHeadline 3</h3>
<p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed in lobortis nisl, vitae iaculis sapien. Phasellus ultrices gravida massa luctus ornare. Suspendisse blandit quam elit, eu imperdiet neque semper. ultrices gravida massa luctus ornare. Suspendisse blandit quam elit, eu imperdiet neque semper. ultrices gravida massa luctus ornare. Suspendisse blandit quam elit, eu imperdiet neque semper. </p>
</p>
</div>
</div>
<div class="space"></div>
</div>
</div>
<div class="col-6 col-sm-6 col-lg-3">
<div class="box ">
<div class="icon ">
<div class="image" style="padding-top:14px;line-height:0px;padding-left:2px"><img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGQAAABkAQAAAABYmaj5AAAAAnRSTlMAAHaTzTgAAAATSURBVBgZYxgFo2AUjIJRQFcAAAV4AAHcRQIbAAAAAElFTkSuQmCC" style="max-width:45px;max-height:45px" data-src="https://iili.io/EcctII.webp" decoding="async" class="lazyload"><noscript><img src="https://iili.io/EcctII.webp" style="max-width:45px;max-height:45px" data-eio="l"></noscript></div>
<div class="info">
<h3 class="title">BoxHeadline 4</h3>
<p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed in lobortis nisl, vitae iaculis sapien. Phasellus ultrices gravida massa luctus ornare. Suspendisse blandit quam elit, eu imperdiet neque semper. </p>
</p>
</div>
</div>
<div class="space"></div>
</div>
</div>
</div>
</div>
</section>
Related
I am new to webdevelopment and have this issue. For this I created a Codepen
For the 6 cards I wanted to ad an image. When I hover over the image it should swap the card and show content. So when the first three cards swaps it still shows up an image instead of the content as the under the first three cards.
So my idea is: when I hover over an image it should swap the card and show only a white background with content as the under three cards.
Can anyone assist me here on how to do it?
.services .icon-box {
text-align: center;
border: 1px solid #e2eefd;
padding: 80px 20px;
transition: all ease-in-out 0.3s;
}
.services .icon-box .icon {
margin: 0 auto;
width: 64px;
height: 64px;
background: #f1f6fe;
border-radius: 4px;
border: 1px solid #deebfd;
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 20px;
transition: ease-in-out 0.3s;
}
.services .icon-box .icon i {
color: #3b8af2;
font-size: 28px;
transition: ease-in-out 0.3s;
}
.services .icon-box h4 {
font-weight: 700;
margin-bottom: 15px;
font-size: 24px;
}
.services .icon-box h4 a {
color: #222222;
transition: ease-in-out 0.3s;
}
.services .icon-box p {
line-height: 24px;
font-size: 14px;
margin-bottom: 0;
margin-top: 0;
}
.services .icon-box:hover {
border-color: #fff;
box-shadow: 0px 0 25px 0 rgba(16, 110, 234, 0.1);
}
.services .icon-box:hover h4 a, .services .icon-box:hover .icon i {
color: #106eea;
}
.services .icon-box:hover .icon {
border-color: #106eea;
}
.flip-card {
background-color: transparent;
height: 337px;
}
.flip-card:hover .flip-card-inner {
transform: rotateY(180deg);
}
.align-items-stretch:hover .flip-card-front {
display: none;
}
.flip-card-inner{
width: 100%;
height: 100%;
transition: transform 0.6s;
transform-style: preserve-3d;
box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
background-size: cover;
background-repeat: no-repeat;
}
.flip-card-front, .flip-card-back {
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
}
.flip-card-back {
color: black;
transform: rotateY(180deg);
}
.flip-card:last-child {
margin-bottom: 0;
}
<link href="https://fonts.googleapis.com/css?family=Open+Sans:300,300i,400,400i,600,600i,700,700i|Roboto:300,300i,400,400i,500,500i,600,600i,700,700i|Poppins:300,300i,400,400i,500,500i,600,600i,700,700i" rel="stylesheet">
<!-- CSS only -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous">
<section id="services" class="services">
<div class="container" data-aos="fade-up">
<div class="section-title">
<h2>Lorem</h2>
<h3>Lorem <span>.</span></h3>
<p>Praesent in dui nec lorem vulputate hendrerit quis vel nisl. Aenean at auctor augue. Vivamus facilisis pretium suscipit. Praesent nec turpis pellentesque elit iaculis tristique et at justo. Pellentesque feugiat, leo nec rutrum aliquam, dui est pulvinar diam, ut elementum velit nibh vitae ipsum. Morbi id lacinia risus. Etiam faucibus erat ac nibh aliquet laoreet. Sed velit ante, auctor sed imperdiet id, elementum a justo. Nullam condimentum metus vitae porttitor tincidunt.</p>
</div>
<div class="row">
<div class="col-lg-4 col-md-6 d-flex align-items-stretch flip-card" data-aos="zoom-in" data-aos-delay="100">
<div class="icon-box flip-card-inner" style="background-image: url('https://images.unsplash.com/photo-1611095790444-1dfa35e37b52?ixid=MnwxMjA3fDF8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1051&q=80');">
<div class="flip-card-front">
<div class="icon"><i class="bx bxs-user-account"></i></div>
<h4>Lorem</h4>
</div>
<div class="flip-card-back">
<p style="font-size: 16px;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam ultrices, tellus in ullamcorper sodales, felis dui condimentum dolor, quis feugiat nunc mi nec turpis. Proin convallis ultrices quam et condimentum.</p>
</div>
</div>
</div>
<div class="col-lg-4 col-md-6 d-flex align-items-stretch mt-4 mt-md-0 flip-card" data-aos="zoom-in" data-aos-delay="100">
<div class="icon-box flip-card-inner" style="background-image: url('https://images.unsplash.com/photo-1560732488-6b0df240254a?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1050&q=80');">
<div class="flip-card-front">
<div class="icon"><i class="bx bx-server"></i></div>
<h4>Lorem</h4>
</div>
<div class="flip-card-back">
<p style="font-size: 16px;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam ultrices, tellus in ullamcorper sodales, felis dui condimentum dolor, quis feugiat nunc mi nec turpis. Proin convallis ultrices quam et condimentum.</p>
</div>
</div>
</div>
<div class="col-lg-4 col-md-6 d-flex align-items-stretch mt-4 mt-lg-0 flip-card" data-aos="zoom-in" data-aos-delay="100">
<div class="icon-box flip-card-inner" style="background-image: url('https://images.unsplash.com/photo-1454779132693-e5cd0a216ed3?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1051&q=80');">
<div class="flip-card-front">
<div class="icon"><i class="bx bx-network-chart"></i></div>
<h4>Lorem</h4>
</div>
<div class="flip-card-back">
<p style="font-size: 16px;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam ultrices, tellus in ullamcorper sodales, felis dui condimentum dolor, quis feugiat nunc mi nec turpis. Proin convallis ultrices quam et condimentum..</p>
</div>
</div>
</div>
<div class="col-lg-4 col-md-6 d-flex align-items-stretch mt-4 flip-card" data-aos="zoom-in" data-aos-delay="100">
<div class="icon-box flip-card-inner" style="text-align: center;">
<div class="flip-card-front">
<div class="icon"><i class="bx bx-world"></i></div>
<h4>Lorem</h4>
</div>
<div class="flip-card-back">
<p style="font-size: 16px;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam ultrices, tellus in ullamcorper sodales, felis dui condimentum dolor, quis feugiat nunc mi nec turpis. Proin convallis ultrices quam et condimentum.</p>
</div>
</div>
</div>
<div class="col-lg-4 col-md-6 d-flex align-items-stretch mt-4 flip-card" data-aos="zoom-in" data-aos-delay="100">
<div class="icon-box flip-card-inner" style="text-align: center;">
<div class="flip-card-front">
<div class="icon"><i class="bx bx-star"></i></div>
<h4>Lorem</h4>
</div>
<div class="flip-card-back">
<p style="font-size: 16px;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam ultrices, tellus in ullamcorper sodales, felis dui condimentum dolor, quis feugiat nunc mi nec turpis. Proin convallis ultrices quam et condimentum.</p>
</div>
</div>
</div>
<div class="col-lg-4 col-md-6 d-flex align-items-stretch mt-4 flip-card" data-aos="zoom-in" data-aos-delay="100">
<div class="icon-box flip-card-inner" style="text-align: center;">
<div class="flip-card-front">
<div class="icon"><i class="bx bx-coin-stack"></i></div>
<h4>Lorem</h4>
</div>
<div class="flip-card-back">
<p style="font-size: 16px;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam ultrices, tellus in ullamcorper sodales, felis dui condimentum dolor, quis feugiat nunc mi nec turpis. Proin convallis ultrices quam et condimentum.</p>
</div>
</div>
</div>
</div>
</div>
</section>
Thank you very much!
You need to hide the image when you show the back of the card. The easiest way to your given code is to set the size of the background to 0.
.flip-card:hover .flip-card-inner {
transform: rotateY(180deg);
background-size: 0; /* Added to hide the background image. */
}
I'm working with mat-card in a list and i have a problem with the aligment
Here what i have:
Here what i want:
The problem is that when the size of content inside a mat card increases,next mat card should automatically adjust the space without leaving a blank space corresponding to previous larger space mat-card
I am attaching the corresponding css and html Code:
.works {
padding-left: 47px;
padding-top: 99px;
// display: inline-flex;
}
.work-head {
// width: 330px;
// height: 28px;
font-family: Raleway-SemiBold;
font-style: normal;
font-weight: 500;
font-size: 24px;
line-height: 28px;
// text-align: center;
color: #000000;
}
.work-list {
// width: 123px;
// height: 28px;
padding-left: 0px;
text-align: right;
padding-top: 23px;
font-family: Raleway-Medium;
font-style: normal;
font-weight: normal;
font-size: 24px;
line-height: 28px;
// text-align: center;
color: #000000;
}
.work-list1 {
// width: 123px;
// height: 28px;
text-align: right;
padding-top: 23px;
font-family: Raleway-Medium;
font-style: normal;
font-weight: normal;
font-size: 24px;
line-height: 28px;
// text-align: center;
padding-left: 49px;
color: #000000;
}
.work-detail {
// width: 159px;
// height: 28px;
padding-left: 0px;
text-align: left;
padding-top: 23px;
font-family: Raleway;
font-style: normal;
font-weight: 300;
font-size: 24px;
line-height: 28px;
// text-align: center;
color: #000000;
}
.flexfix {
flex-basis: 0;
}
.work-card {
// margin-right: 26px;
margin-bottom: 26px;
padding-top: 39px;
padding-left: 17px;
padding-bottom: 49px;
padding-right: 10px;
width: 506px;
// height: 244px;
background: #FFFFFF;
border: 1px solid #E5E5E5;
box-sizing: border-box;
box-shadow: 4px 4px 4px rgba(0, 0, 0, 0.04);
}
.card-margin{
margin-left: 3%;
}
<div class="works">
<div fxLayout="row layout-wrap">
<div *ngFor="let item of listOfProjects" class="card-margin">
<mat-card class="work-card">
<mat-card-title class="work-head">{{item.name}}</mat-card-title>
<img class="line-align" src="assets/icons/DashBoard/work-card-line.svg" />
<mat-card-content>
<div *ngIf="item.name==='test10'">
<div fxLayout="row" fxLayoutGap="20px">
<div class="work-list">Contractor:</div>
<div class="work-detail">{{item.baseEntityByContractor.entityName}}</div>
</div>
<div fxLayout="row" fxLayoutGap="20px">
<div class="work-list">Contractor:</div>
<div class="work-detail">{{item.baseEntityByContractor.entityName}}</div>
</div>
</div>
<div fxLayout="row" fxLayoutGap="20px">
<div class="work-list">Contractor:</div>
<div class="work-detail">{{item.baseEntityByContractor.entityName}}</div>
</div>
<div fxLayout="row" fxLayoutGap="20px">
<div class="work-list1">Status:</div>
<div class="work-detail">{{item.projectStatus.name}}</div>
</div>
</mat-card-content>
</mat-card>
</div>
</div>
</div>
Hope from the below example u will find a solution for ur problem.
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<div class="row">
<div class="col-6">
<div class="row">
<div class="col-12">
<div class="card border p-3 mb-2">
<p>Lorericies nisl eget tincidunt. Vestibulum id pulvinar risus. Nam viverra pretium luctus. Morbi turpis tortor pretium luctus. Morbi turpis torto pretium luctus. Morbi turpis torto</p>
</div>
</div>
<div class="col-12">
<div class="card border p-3 mb-2">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris tempor ultricies nisl eget tincidunt. Vestibulutor</p>
</div>
</div>
<div class="col-12">
<div class="card border p-3 mb-2">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris tempor ultricies nisl eget tincidunt. Vr risus. Nam viverra pretium luctus. Morbi turpis tortor</p>
</div>
</div>
<div class="col-12">
<div class="card border p-3 mb-2">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris tempor ultricies nisl eget tincidunt. Vestibulum id pulvinar risus. Nam viverra pretium luctus. Morbi turpis tortor</p>
</div>
</div>
</div>
</div>
<div class="col-6">
<div class="row">
<div class="col-12">
<div class="card border p-3 mb-2">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris tempoar risus. Nam viverra pretium luctus. Morbi turpis tortor</p>
</div>
</div>
<div class="col-12">
<div class="card border p-3 mb-2">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris tempor ultricies nisl eget tincidunt. Vestibulum id pulvinar risus. Nam viverra pretium luctus. Morbi turpis tortor</p>
</div>
</div>
<div class="col-12">
<div class="card border p-3 mb-2">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris tempor</p>
</div>
</div>
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
This is a common css issue, and you need a masonry layout. You can achieve this, with css column-count rule, and whit inline-block elements. You need to add a media query to change the column-count responsively.
See this article, or this example.
With this, you don't need external CSS or JS library.
I try to make my first page. I'm learning coding but I have problems with a responsive display. I'm making with Bootstrap, I want to make my layout responsive in all way.
But this is hard for me as I'm starting and learning to code.
.fromtop{
padding-top: 30px;
}
#media (max-width: 767px){
.fromtop{
padding: 0px;
} }
.circle{
border-radius: 50%;
width: 250px;
height: 250px;
background: red;
color: white;
}
#media (max-width: 1199px){
.circle{
border-radius: 50%;
width: 230px;
height: 230px;
background: red;
color: white;
}
}
#media (max-width: 1000px){
.circle{
border-radius: 50%;
width: 210px;
height: 210px;
background: red;
color: white;
}
}
#media (max-width: 850px){
.circle{
border-radius: 50%;
width: 190px;
height: 190px;
background: red;
color: white;
}
}
.text-inner {
text-align: center;
display: inline-block;
}
.number{
font-size: 110px;
width: 100%;
margin-top: 89px;
}
#media (max-width: 991px) {
.number{
font-size: 110px;
width: 100%;
margin-top: 0px;
} }
#media (max-width: 421px) {
.number-3{
font-size: 110px;
width: 100%;
margin-top: -50px;
} }
.middle{
padding-top: 50px;
}
.white-text{
font-size: 20px;
color: rgb(255, 255, 255);
text-align: center;
}
.nop{
margin-top: 0px;
}
.totop{
margin-top: -45px;
}
.arrow{
margin-top: 100px;
}
.under-number {
margin-left: 80px;
}
<section class="well-md bg-white white">
<div class="container inset-6">
<h2 class="text-bold text-center red">Lorem ipsum</h2>
<div class="row">
<div class="col-lg-3 col-md-4 col-sm-3">
<div class="circle">
<p class="number text-bold text-inner">1.</p>
<p class="text-bold under-number">Lorem</p>
</div>
</div>
<div class="text-left col-lg-9 col-md-8 col-sm-9">
<h3 class="text-bold big-grey goright">Lorem ipsum</h3>
<p class="grey goright">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse tristique mattis arcu a ullamcorper. In hac habitasse platea dictumst. In a nibh a urna condimentum aliquet egestas sed nulla. Sed molestie ligula id enim placerat suscipit. Sed sit amet semper purus.</p>
</div>
</div>
<img src="images/arrow.png">
<div class="row totop">
<div class="text-right col-lg-9 col-md-9 col-sm-9">
<h3 class="text-bold big-grey">Lorem ipsum</h3>
<p class="grey">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse tristique mattis arcu a ullamcorper. In hac habitasse platea dictumst. In a nibh a urna condimentum aliquet egestas sed nulla. Sed molestie ligula id enim placerat suscipit. Sed sit amet semper purus.</p>
</div>
<div class="col-lg-3 col-md-3 col-sm-3">
<div class="circle">
<p class="number text-bold text-inner">2.</p>
<p class="text-bold under-number">Lorem</p>
</div>
</div>
</div>
<img src="images/arrow2.png" class="pull-right">
<div class="row arrow">
<div class="col-sm-3">
<div class="circle">
<p class="number text-bold text-inner number-3">3.</p>
<p class="text-bold under-number">Lorem</p>
</div>
</div>
<div class="text-left col-md-9">
<h3 class="text-bold big-grey goright">Lorem ipsum</h3>
<p class="grey goright">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse tristique mattis arcu a ullamcorper. In hac habitasse platea dictumst. In a nibh a urna condimentum aliquet egestas sed nulla. Sed molestie ligula id enim placerat suscipit. Sed sit amet semper purus.</p>
</div>
</div>
</div>
</section>
I need help with an invisible/inexplicable space gap in my webpage, in the screen screenshots below you can see the space (the red area):
I need that they behavior just like the other row below "LMP" and "LMB"
In Safari the space gap is not present, but in chrome and firefox this space appears, ain honestly I don't kow what to do, i detected that the container class with a width:80% desapears the gap, but then the page becomes too thin.
Here is a
JSfiddle
IF anyone has the same problem, above the titles I have a header, in this I missed a /div so the next row was complete crazy...thanks to all for helping me, i really apreciate the help
You need to make <div class="row">
before any col-md/col-lg/col-sm Because Bootstrap keep 15px Padding for this.
Update jsfiddle solution:
Update solution in codepen Link
And Update Snipper
/***** 3.- NEWS AND CONTENT *******/
.news-section {
background-color: #F1EFEF;
height: 1500px;
}
.black-title {
margin-top: 50px;
height: 60px;
width:112%;
margin-left: -15px;
background-color: #4A90E2;
text-align: center;
line-height: 60px;
}
.black-title > h3 {
vertical-align: middle;
}
.white-title {
margin-top: 50px;
height: 60px;
margin-left: -15px;
background-color: #3F444A;
color: #fff;
text-align: center;
line-height: 60px;
}
.white-title > h3 {
vertical-align: middle;
}
.title-section-2 {
margin-top:0px;
height: 100%;
}
.news-content {
margin-top: 25px;
display: block;
}
.news-content img {
margin:auto;
background-color: #F1EFEF;
}
.news-link {
text-align: right;
margin: 10px;
}
.news-link a {
color: #E7BF3A;
text-decoration: none;
}
.spot-horizontal {
height: 90px;
margin-top: 10px;
background-color: #BD10E0;
}
.logos-horizontal {
height: 50px;
background-color: #3F444A;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<section>
<div class="container">
<div class="row">
<div class="news-section">
<div class="col-md-6 col-sm-6">
<div class="row">
<h3 class=" black-title">Lo más nuevo</h3>
<div class="news-content">
<img class="img-responsive" src="http://placehold.it/500x400" alt="" >
</div>
</div>
</div>
<div class="col-md-6 col-sm-6">
<div class="row">
<h3 class="white-title">Videos más nuevos</h3>
<div class="news-content">
<img class="img-responsive" src="http://placehold.it/500x400" alt="" >
</div>
</div>
</div>
<div class="col-md-12 spot-horizontal">
<div class="row">
<h3 class="title-black">PUBLICIDAD</h3>
</div>
</div>
<div class="col-md-6 col-sm-6">
<div class="row">
<h3 class=" black-title title-section-2">LMB</h3>
<div class="news-content">
<h4>Titulo de noticia</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean molestie aliquet tristique. Proin aliquam neque quis est sagittis, tempus sagittis tortor mattis. Praesent nec gravida.</p>
<h4>Titulo de noticia</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean molestie aliquet tristique. Proin aliquam neque quis est sagittis, tempus sagittis tortor mattis. Praesent nec gravida.</p>
<div class="news-link">
Más Noticias
</div>
</div>
</div>
</div>
<div class="col-md-6 col-sm-6">
<div class="row">
<h3 class="white-title title-section-2">LMP</h3>
<div class="news-content">
<h4>Titulo de noticia</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean molestie aliquet tristique. Proin aliquam neque quis est sagittis, tempus sagittis tortor mattis. Praesent nec gravida.</p>
<h4>Titulo de noticia</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean molestie aliquet tristique. Proin aliquam neque quis est sagittis, tempus sagittis tortor mattis. Praesent nec gravida.</p>
<div class="news-link">
Más Noticias
</div>
</div>
</div>
</div>
<div class="col-md-12 logos-horizontal">
<div class="row">
<h3 class="white-title title-section-2">LOGOS</h3>
</div>
</div>
</div>
</div>
</div>
</section>
Both divs have to be inline-block and have the same parent.
Here's a fiddle: https://jsfiddle.net/fbrh1464/6
I need the image cards to align like pinterest. I have attached an image of what I am trying to get it to do.
==================================================
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>
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>