How to put an image below another image? - html

I want to set images below one another like this
but these images displaying like this
Here is my html code with css. In code, i used columns but problem is not solved. Images is not displaying as i want to display.
<div class="row">
<div class="card">
<img alt="Card image cap" class="card-img-top" src="https://i.pinimg.com/736x/04/54/98/045498ad4b9b3cdd4d780fcfcaf3392a--cake-decorating-fondant-spring-cakes-decorating.jpg" >
</div>>
<div class="card">
<img alt="Card image cap" class="card-img-top" src="http://www.sliceofitaly.com/files/product/full/0415BDDC-justformylove.jpg" >
</div>
<div class="card">
<img alt="Card image cap" class="card-img-top" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSmZNLgk07M9ksvjkM8QHxqdFOkxnqFROYgMBu1Q5T-m2jNfrwF" >
</div>
<div class="card">
<img alt="Card image cap" class="card-img-top" src="http://www.fnstatic.co.uk/images/content/recipe/mini-christmas-cakes.jpg" >
</div>
<div class="card">
<img alt="Card image cap" class="card-img-top" src="https://i.pinimg.com/736x/32/6c/19/326c191b3b4a373d0b73189551b4a693--spider-man-cakes-spiders.jpg" >
</div>
<div class="card">
<img alt="Card image cap" class="card-img-top" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSqESHTW7PwOycYQucPrFkEaTPfdsIod7GYqm3fIUNyQUzHGiS0" >
</div>
<div class="card">
<img alt="Card image cap" class="card-img-top" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQ0KuVORGDRBMrnC4j4oMm-TU_LmU2JZ0KLeDbD49h5Rt97dXTEEg" >
</div>
<div class="card">
<img alt="Card image cap" class="card-img-top" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQ0KuVORGDRBMrnC4j4oMm-TU_LmU2JZ0KLeDbD49h5Rt97dXTEEg" >
</div>
<div class="card">
<img alt="Card image cap" class="card-img-top" src="http://www.fnstatic.co.uk/images/content/recipe/mini-christmas-cakes.jpg" >
</div>
<div class="card">
<img alt="Card image cap" class="card-img-top" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQ0KuVORGDRBMrnC4j4oMm-TU_LmU2JZ0KLeDbD49h5Rt97dXTEEg" >
</div>
<div class="card">
<img alt="Card image cap" class="card-img-top" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQ0KuVORGDRBMrnC4j4oMm-TU_LmU2JZ0KLeDbD49h5Rt97dXTEEg" >
</div>
</div>
css for images
.card-img-top
{
width: 20%;
height:auto;
margin:5px;
display:inline-block;
float:right;
}


I tried using the column-count attribute on the row-div. Usually it is used to split up big chunks of text into equal columns, but I found it to be working with images aswell!
.row {
/* Prevent vertical gaps */
line-height: 0;
-webkit-column-count: 3;
-webkit-column-gap: 0px;
-moz-column-count: 3;
-moz-column-gap: 0px;
column-count: 3;
column-gap: 0px;
}
.card {
width: 100%;
height: auto;
}
.card-img-top {
width: 100% !important;
height: auto !important;
margin: 5px;
}


This is my demo code, I am using flexBox. see in full mode
Set Box height:auto so it will automatically set height of all Box
<html>
<style>
html{
height: 100%;
}
body{
height: 100%;
}
#wrapper{
height: 100vh;
display: flex;
flex-direction: column;
flex-wrap: wrap;
}
.box{
display: flex;
background: black;
margin: 0.5%;
}
#box-1{
height: 50%;
width: 32%;
}
#box-2{
height: 46%;
width: 32%;
}
#box-3{
height: 20%;
width: 33%;
}
#box-4{
height: 49%;
width: 33%;
}
#box-5{
height: 25%;
width: 33%;
}
#box-6{
height: 20%;
width: 33%;
}
#box-7{
height: 75%;
width: 33%;
}
p{
color: white;
}
</style>
<body>
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<div id="wrapper">
<div id="box-1" class="box">
<p>Hi</p>
</div>
<div id="box-2" class="box">
</div>
<div id="box-3" class="box">
</div>
<div id="box-4" class="box">
</div>
<div id="box-5" class="box">
</div>
<div id="box-6" class="box">
</div>
<div id="box-7" class="box">
</div>
</div>
</body>
</html>
</body>
</html>


This is example with picture....!
<html>
<style>
html{
height: 100%;
}
body{
height: 100%;
display:flex;
}
#wrapper{
min-height: 100vh;
height: auto;
display: flex;
flex-direction: column;
width:32.3%
}
.box{
display: flex;
background: black;
margin: 0.5%;
width: 100%;
height: auto;
}
.box img{
max-height:50%;
min-height:15%;
width:100%;
}
p{
color: white;
}
</style>
<body>
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<div id="wrapper">
<div class="box">
<img alt="Card image cap" class="card-img-top" src="https://i.pinimg.com/736x/04/54/98/045498ad4b9b3cdd4d780fcfcaf3392a--cake-decorating-fondant-spring-cakes-decorating.jpg" />
</div>
<div class="box">
<img alt="Card image cap" class="card-img-top" src="http://www.sliceofitaly.com/files/product/full/0415BDDC-justformylove.jpg" />
</div>
<div class="box">
<img alt="Card image cap" class="card-img-top" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSmZNLgk07M9ksvjkM8QHxqdFOkxnqFROYgMBu1Q5T-m2jNfrwF" />
</div>
</div>
<div id="wrapper">
<div class="box">
<img alt="Card image cap" class="card-img-top" src="http://www.fnstatic.co.uk/images/content/recipe/mini-christmas-cakes.jpg" />
</div>
<div class="box">
<img alt="Card image cap" class="card-img-top" src="https://i.pinimg.com/736x/32/6c/19/326c191b3b4a373d0b73189551b4a693--spider-man-cakes-spiders.jpg" />
</div>
<div class="box">
<img alt="Card image cap" class="card-img-top" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSqESHTW7PwOycYQucPrFkEaTPfdsIod7GYqm3fIUNyQUzHGiS0" />
</div>
</div>
<div id="wrapper">
<div class="box">
<img alt="Card image cap" class="card-img-top" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQ0KuVORGDRBMrnC4j4oMm-TU_LmU2JZ0KLeDbD49h5Rt97dXTEEg" />
</div>
<div class="box">
<img alt="Card image cap" class="card-img-top" src="https://i.pinimg.com/736x/32/6c/19/326c191b3b4a373d0b73189551b4a693--spider-man-cakes-spiders.jpg" />
</div>
<div class="box">
<img alt="Card image cap" class="card-img-top" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQ0KuVORGDRBMrnC4j4oMm-TU_LmU2JZ0KLeDbD49h5Rt97dXTEEg" />
</div>
</div>
</body>
</html>
</body>
</html>

Related

Responsive card grid with full image height on hover

I'm hoping to get some advice on creating a responsive card that will display the full height of an image on hover. I've been working on it for the past hour and have come up with a solution, which you can see in my jsfiddle file. However, it's not quite as responsive as I'd like it to be. I'd really appreciate any tips or recommendations you might have.
Here is my take: jsfiddle
.card-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(270px, 1fr));
gap: 2rem;
}
.card {
position: relative;
background: #eee;
display: flex;
flex-direction: column;
height: 420px;
}
.card .thumbnail {
position: relative;
width: 100%;
height: 275px;
}
.card:hover {
z-index: 999;
}
.card:hover .thumbnail {
height: auto;
}
.card:hover .details {
top: 100%;
}
.card .thumbnail img {
width: 100%;
height: 100%;
object-fit: cover;
transition: height 0.3s ease-in-out;
}
.card .details {
display: flex;
flex-direction: column;
position: absolute;
width: 100%;
background: blue;
bottom: 0;
height: 170px;
}
.card .details h1 {}
<div class="card-grid">
<div class="card">
<div class="thumbnail">
<img src="#" alt="Card Thumbnail">
</div>
<div class="details">
<h1>Card Title</h1>
<p>Card description goes here</p>
</div>
</div>
<div class="card">
<div class="thumbnail">
<img src="#" alt="Card Thumbnail">
</div>
<div class="details">
<h1>Card Title</h1>
<p>Card description goes here</p>
</div>
</div>
<div class="card">
<div class="thumbnail">
<img src="#" alt="Card Thumbnail">
</div>
<div class="details">
<h1>Card Title</h1>
<p>Card description goes here</p>
</div>
</div>
<div class="card">
<div class="thumbnail">
<img src="#" alt="Card Thumbnail">
</div>
<div class="details">
<h1>Card Title</h1>
<p>Card description goes here</p>
</div>
</div>
<div class="card">
<div class="thumbnail">
<img src="#" alt="Card Thumbnail">
</div>
<div class="details">
<h1>Card Title</h1>
<p>Card description goes here</p>
</div>
</div>
<div class="card">
<div class="thumbnail">
<img src="#" alt="Card Thumbnail">
</div>
<div class="details">
<h1>Card Title</h1>
<p>Card description goes here</p>
</div>
</div>
<div class="card">
<div class="thumbnail">
<img src="#" alt="Card Thumbnail">
</div>
<div class="details">
<h1>Card Title</h1>
<p>Card description goes here</p>
</div>
</div>
</div>
I am using position: absolute in order to prevent the card height from changing and disrupting the grid layout.
Thank you!

Is it possible to adjust the heights of each individual item of a row in grid? [duplicate]

This question already has answers here:
CSS-only masonry layout
(4 answers)
Closed 1 year ago.
I am trying to make a gallery that is uneven and staggered by using images and colored divs that are not the same size. I have the columns set to a min of 352px and to auto-fit the screen. So the container with grid looks something like this:
display: grid;
grid-template-columns: repeat(auto-fit, minmax(352px, 1fr));
grid-gap: 20px;
The issue I am having is the tallest picture sets the height of the row and the divs that have the smaller images follow the same height. Is there a way to tell the items in the row to not all be the same size? Or rather just target certain items in each row and tell them to be a specific height?
.grey {
background: #D9D9D9;
}
.tan {
background: #DCCEC8;
}
.light-brown {
background: #DC997D;
}
.brown {
background: #814A3D;
}
.black {
background: #000;
}
.grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(352px, 1fr));
grid-gap: 20px;
}
.grid > div {
display: flex;
flex-direction: column;
align-items: center;
position: relative;
}
img {
max-width: 350px;
width: 350px;
}
.overlay {
position: absolute;
width: 350px;
height: 100%;
background: rgba(0, 0, 0, 0.05);
}
h4 {
text-transform: uppercase;
font-size: 26px;
color: #fff;
position: absolute;
z-index: 9;
}
h4:nth-child(2) {
bottom: 35px;
}
h4:nth-child(3) {
font-size: 18px;
margin: 5px 0;
bottom: 5px;
}
.fill {
max-width: 350px;
height: 100%;
width: 100%;
}
<div class='grid'>
<div>
<img class="thumbnail" src="https://picsum.photos/500/600" alt="person" />
<h4>Person One</h4>
<h4>#person1</h4>
<div class="overlay"></div>
</div>
<div><div class="tan fill"></div></div>
<div>
<img class="thumbnail" src="https://picsum.photos/300/220" alt="person" />
<h4>Person TWO</h4>
<h4>#person2</h4>
<div class="overlay"></div>
</div>
<div><div class="black fill"></div></div>
<div>
<img class="thumbnail" src="https://picsum.photos/700/700" alt="person" />
<h4>Person 3</h4>
<h4>#person3</h4>
<div class="overlay"></div>
</div>
<div>
<img class="thumbnail" src="https://picsum.photos/400/400" alt="person" />
<h4>Person four</h4>
<h4>#person4</h4>
<div class="overlay"></div>
</div>
<div>
<img class="thumbnail" src="https://picsum.photos/500/260" alt="person" />
<h4>Person Five</h4>
<h4>#pesron5</h4>
<div class="overlay"></div>
</div>
<div><div class="light-brown fill"></div></div>
<div><div class='brown fill'></div></div>
<div>
<img class="thumbnail" src="https://picsum.photos/600/220" alt="person" />
<h4>Person Six</h4>
<h4>#person6</h4>
<div class="overlay"></div>
</div>
<div><div class="black fill"></div></div>
<div>
<img class="thumbnail" src="https://picsum.photos/200/350" alt="person" />
<h4>Person Seven</h4>
<h4>#person7</h4>
<div class="overlay"></div>
</div>
<div>
<img class="thumbnail" src="https://picsum.photos/500/300" alt="person" />
<h4>Person Eight</h4>
<h4>#person8</h4>
<div class="overlay"></div>
</div>
<div><div class="tan fill"></div></div>
<div>
<img class="thumbnail" src="https://picsum.photos/250/250" alt="person" />
<h4>Person Nine</h4>
<h4>#Person9</h4>
<div class="overlay"></div>
</div>
<div>
<img class="thumbnail" src="https://picsum.photos/300/220" alt="person" />
<h4>Person Ten</h4>
<h4>#person10</h4>
<div class="overlay"></div>
</div>
</div>

Use height on the grid items. Moreover, the headings should be wrapped in a container and their default margins should be overwritten so that headings fit in container with image's height < 150px.
.grey {
background: #d9d9d9;
}
.tan {
background: #dccec8;
}
.light-brown {
background: #dc997d;
}
.brown {
background: #814a3d;
}
.black {
background: #000;
}
.grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(352px, 1fr));
grid-gap: 20px;
}
.grid>div {
display: flex;
flex-direction: column;
align-items: center;
position: relative;
}
img {
max-width: 350px;
width: 350px;
}
.overlay {
position: absolute;
width: 350px;
height: fit-content;
background: rgba(0, 0, 0, 0.05);
bottom: 0;
display: flex;
flex-direction: column;
justify-content: center;
align-content: center;
}
h4 {
text-transform: uppercase;
font-size: 26px;
color: #fff;
z-index: 9;
text-align: center;
margin: 0;
margin-bottom: 10px;
}
.fill {
max-width: 350px;
height: 100%;
width: 100%;
}
.grid-item {
height: fit-content;
height: -moz-fit-content;
}
<div class="grid">
<div class="grid-item">
<img class="thumbnail" src="https://picsum.photos/500/1000" alt="person" />
<div class="overlay">
<h4>Person One</h4>
<h4>#person1</h4>
</div>
</div>
<div>
<div class="tan fill"></div>
</div>
<div class="grid-item">
<img class="thumbnail" src="https://picsum.photos/1500/2000" alt="person" />
<div class="overlay">
<h4>Person TWO</h4>
<h4>#person2</h4>
</div>
</div>
<div>
<div class="black fill"></div>
</div>
<div class="grid-item">
<img class="thumbnail" src="https://picsum.photos/700/1500" alt="person" />
<div class="overlay">
<h4>Person 3</h4>
<h4>#person3</h4>
</div>
</div>
<div class="grid-item">
<img class="thumbnail" src="https://picsum.photos/400/100" alt="person" />
<div class="overlay">
<h4>Person four</h4>
<h4>#person4</h4>
</div>
</div>
<div class="grid-item">
<img class="thumbnail" src="https://picsum.photos/500/200" alt="person" />
<div class="overlay">
<h4>Person Five</h4>
<h4>#pesron5</h4>
</div>
</div>
<div>
<div class="light-brown fill"></div>
</div>
<div>
<div class="brown fill"></div>
</div>
<div class="grid-item">
<img class="thumbnail" src="https://picsum.photos/600/220" alt="person" />
<div class="overlay">
<h4>Person Six</h4>
<h4>#person6</h4>
</div>
</div>
<div>
<div class="black fill"></div>
</div>
<div class="grid-item">
<img class="thumbnail" src="https://picsum.photos/200/150" alt="person" />
<div class="overlay">
<h4>Person Seven</h4>
<h4>#person7</h4>
</div>
</div>
<div class="grid-item">
<img class="thumbnail" src="https://picsum.photos/500/300" alt="person" />
<div class="overlay">
<h4>Person Eight</h4>
<h4>#person8</h4>
</div>
</div>
<div>
<div class="tan fill"></div>
</div>
<div class="grid-item">
<img class="thumbnail" src="https://picsum.photos/250/250" alt="person" />
<div class="overlay">
<h4>Person Nine</h4>
<h4>#Person9</h4>
</div>
</div>
<div class="grid-item">
<img class="thumbnail" src="https://picsum.photos/300/220" alt="person" />
<div class="overlay">
<h4>Person Ten</h4>
<h4>#person10</h4>
</div>
</div>
</div>

How to make horizontal scrollbar for multiple rows and columns in bootstrap?

I want multiple rows and columns to be horizontally scrolled by only one scroll bar. I could managed to make scrollbar for only one row and multiple columns
I tried the following but i could only make the scrollbar for only row.
the given below is the code i tried
.page {
width: auto;
margin: auto;
}
.hs {
list-style: none;
overflow-x: auto;
white-space: nowrap;
width: 100%;
padding: 0 10% 2rem 0%;
}
.hs .item {
display: inline-block;
width: auto;
text-align: center;
margin-right: 0.75rem;
height: 100%;
white-space: normal;
}
::-webkit-scrollbar {
height: 15px;
}
::-webkit-scrollbar-track-piece {
background-color: gray;
}
.li {
text-decoration: none;
}
<div class="container page">
<ul class="hs">
<li class="item">
<div class="col-lg-3 col-md-4 col-sm-6 ">
<div class="card border-0" style="width: 15rem;">
<img class="card-img-top" src="images/image 25.png" alt="Card image cap">
</div>
</div>
</li>
<li class="item">
<div class="col-lg-3 col-md-4 col-sm-6 ">
<div class="card border-0" style="width: 15rem;">
<img class="card-img-top" src="images/image 25.png" alt="Card image cap">
</div>
</div>
</li>
<li class="item">
<div class="col-lg-3 col-md-4 col-sm-6 ">
<div class="card border-0" style="width: 15rem;">
<img class="card-img-top" src="images/image 25.png" alt="Card image cap">
</div>
</div>
</li>
<li class="item">
<div class="col-lg-3 col-md-4 col-sm-6 ">
<div class="card border-0" style="width: 15rem;">
<img class="card-img-top" src="images/image 25.png" alt="Card image cap">
</div>
</div>
</li>
<li class="item">
<div class="col-lg-3 col-md-4 col-sm-6 ">
<div class="card border-0" style="width: 15rem;">
<img class="card-img-top" src="images/image 25.png" alt="Card image cap">
</div>
</div>
</li>
<li class="item">
<div class="col-lg-3 col-md-4 col-sm-6 ">
<div class="card border-0" style="width: 15rem;">
<img class="card-img-top" src="images/image 25.png" alt="Card image cap">
</div>
</div>
</li>
<li class="item">
<div class="col-lg-3 col-md-4 col-sm-6 ">
<div class="card border-0" style="width: 15rem;">
<img class="card-img-top" src="images/image 25.png" alt="Card image cap">
</div>
</div>
</li>
<li class="item">
<div class="col-lg-3 col-md-4 col-sm-6 ">
<div class="card border-0" style="width: 15rem;">
<img class="card-img-top" src="images/image 25.png" alt="Card image cap">
</div>
</div>
</li>
<li class="item">
<div class="col-lg-3 col-md-4 col-sm-6 ">
<div class="card border-0" style="width: 15rem;">
<img class="card-img-top" src="images/image 25.png" alt="Card image cap">
</div>
</div>
</li>
<li class="item">
<div class="col-lg-3 col-md-4 col-sm-6 ">
<div class="card border-0" style="width: 15rem;">
<img class="card-img-top" src="images/image 25.png" alt="Card image cap">
</div>
</div>
</li>
</ul>
</div>

You need to give height and width to your <ul> tag. That will set your height. Then you need to style the ul like overflox-y: scroll;. This will make your list as scrollbar. If wont work try overflow-y: auto;.
example
ul{
height: 200px;
max-height: 200px;
width: 200px;
border: 2px solid blue;
overflow-y: scroll;
}
li{
height: 50px;
border: 2px solid black;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width = device-width, initial-scale = 1.0">
<meta http-equiv="X-UA-Compatible" content = "ie=edge">
<title> Keat </title>
</head>
<body>
<ul>
<li>Li-1</li>
<li>Li-2</li>
<li>Li-3</li>
<li>Li-4</li>
<li>Li-5</li>
<li>Li-6</li>
</ul>
</body>
</html>

you can use:
in div tag u can use these properties
{
<div class="my-custom-scrollbar my-custom-scrollbar-primary">
}
in your style tag use this code
{
.my-custom-scrollbar {
position: relative;
width: 800px;
height: 400px;
overflow: auto;
}
}

bootstrap 4 - arrange images in particular?

I created a simple page in my Laravel and in that page, I have three sections which is mainly navigation, content and footer. I got the navigation and footer layout completed. In the content section, I wish to use bootstrap to place my images layout like this:
Image:
This is just a general idea but I need it to be responsive so it fits the mobile layout as well.
What I have tried is to use Masonry for CSS but it does not fit the mobile layout responsively. I tried using bootstrap 4 but the alignment between IMG3 and IMG4/5 are too far apart and placing margin does not align them near enough.
My code:
#section('content')
<div class="container">
<div class="row">
<div class="col-sm">
<img src="{{asset('/images/Home_Bed.jpg')}}" class="img-fluid custom-position-1" alt="">
</div>
<div class="col-sm col-8">
<img src="//via.placeholder.com/350x150" class="img-fluid custom-position-2" alt="">
</div>
<div class="col-sm custom-position-3">
<img src="{{asset('/images/Home_Kitchen.jpg')}}" class="img-fluid custom-position-3" alt="">
</div>
</div>
<div class="row align-items-end">
<div class="col col-8">
<img src="{{asset('/images/Shop_Page.jpg')}}" class=" img-fluid custom-position-4" alt="">
</div>
<div class="col">
<img src="{{asset('/images/Home_Sofa.jpg')}}" class="img-fluid custom-position-5" alt="">
</div>
</div>
</div>
#endsection
.row {
margin-bottom: 30px;
}
.custom-position-1{
position: relative;
bottom: -160px;
left: 50px;
height:100px;
object-fit: cover;
}
.custom-position-2{
position:relative;
right:100px;
object-fit:cover;
}
.custom-position-3{
position: relative;
bottom: -160px;
left: 50px;
height:100px;
object-fit: cover;
}
.custom-position-4{
position: relative;
height: 400px;
width:800px;
object-fit: cover;
}
.custom-position-5{
position: relative;
height:300px;
left:50px;
top: 100px;
object-fit: cover;
}
Does anyone have any idea how to make it good?

Are you looking for a solution like this?
If you want to have some spacing use margin classes.
img {
width: 100%;
height: 100%;
}
[class*="col-"],
.flex-grow-0 {
border: 1px solid black;
}
.img-fluid {
padding: 5px;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
<div class="container">
<div class="row m-0">
<div class="col-8 p-0">
<div class="row m-0">
<div class="col-6 p-0">
<img src="http://placehold.it/300x300" class="img-fluid" alt="" />
</div>
<div class="col-6 p-0">
<img src="http://placehold.it/300x300" class="img-fluid" alt="" />
</div>
<div class="col-12 p-0">
<img src="http://placehold.it/300x300" class="img-fluid" alt="" />
</div>
</div>
</div>
<div class="col-4 p-0 d-flex">
<div class="d-flex flex-column">
<div class="flex-grow-0 mt-auto">
<img src="http://placehold.it/300x500" class="img-fluid" alt="" />
</div>
<div class="flex-grow-0">
<img src="http://placehold.it/400x400" class="img-fluid" alt="" />
</div>
</div>
</div>
</div>
</div>

Overlay with words across multiple images

I am making a instagram type of feed and have a 4 images with a further 4 below those 4. I need to make a overlay which I can put words in front of all 8 images showing instagram followers and a link to their instagram.
I have most of it done but the overlay I cannot seem to get it to work. Any help would be appreciated, thanks in advance.
Josh
<ul class="images">
<div class="col-sm-3">
<img src="img/instagram/image-1.jpg" alt="Image Gallery" class="img-responsive">
</div>
<div class="col-sm-3">
<img src="img/instagram/image-2.jpg" alt="Image Gallery" class="img-responsive">
</div>
</ul>

Use o overlay div with position absolute covering the entire images container like the example....
.images{
position:relative;
display:inline-block;
}
.overlay{
position: absolute;
top: 0;
left: 0;
background: rgba(255,255,255,0.5);
width: 100%;
height: 100%;
text-align: center;
display: flex;
align-items: center;
justify-content: center;
visibility: hidden;
}
.images:hover .overlay{
visibility: visible;
}
<div class="images">
<div class="col-sm-3">
<img src="http://via.placeholder.com/350x150" alt="Image Gallery" class="img-responsive">
</div>
<div class="col-sm-3">
<img src="http://via.placeholder.com/350x150" alt="Image Gallery" class="img-responsive">
</div>
<div class='overlay'>
<span>some text</span>
</div>
</div>

Like this? You can put whatever words in the overlay as you want. I used xs columns so you could see it fully.
.overlay{
display:block;
position:absolute;
top:0;
right:0;
bottom:0;
left:0;
background-color:rgba(0,0,0,.5);
z-index:10;
}
.overlay h2{
color:#fff;
}
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container-fluid">
<div class="overlay">
<h2>Follow me on Insta</h2>
</div>
<div class="row images">
<div class="col-xs-3">
<img src="http://fillmurray.com/200/300" alt="Image Gallery" class="img-responsive">
</div>
<div class="col-xs-3">
<img src="http://fillmurray.com/200/300" alt="Image Gallery" class="img-responsive">
</div>
<div class="col-xs-3">
<img src="http://fillmurray.com/200/300" alt="Image Gallery" class="img-responsive">
</div>
<div class="col-xs-3">
<img src="http://fillmurray.com/200/300" alt="Image Gallery" class="img-responsive">
</div>
</div>
</div>

I think the below is what you need. I used flexboxes for layout.
* {
box-sizing: border-box;
}
.container {
display: flex;
justify-content: flex-start;
flex-flow: wrap;
width: 500px;
}
.item {
display: inline-block;
margin: 0 0.5em 0.5em 0;
position: relative;
}
.text {
opacity: 0;
background-color: rgba(0, 0, 0, 0.6);
position: absolute;
display: flex;
align-items: center;
justify-content: center;
width: 100px;
height: 100px;
top: 0;
}
.text:hover {
border: thin solid red;
animation: opac 0.3s ease forwards;
}
#keyframes opac {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="row-sm-12 container">
<div class="row-sm-3 item">
<img src="http://placehold.it/100">
<div class="text">Bla bla</div>
</div>
<div class="row-sm-3 item">
<img src="http://placehold.it/100">
<div class="text">Bla bla</div>
</div>
<div class="row-sm-3 item">
<img src="http://placehold.it/100">
<div class="text">Bla bla</div>
</div>
<div class="row-sm-3 item">
<img src="http://placehold.it/100">
<div class="text">Bla bla</div>
</div>
<div class="row-sm-3 item">
<img src="http://placehold.it/100">
<div class="text">Bla bla</div>
</div>
<div class="row-sm-3 item">
<img src="http://placehold.it/100">
<div class="text">Bla bla</div>
</div>
<div class="row-sm-3 item">
<img src="http://placehold.it/100">
<div class="text">Bla bla</div>
</div>
<div class="row-sm-3 item">
<img src="http://placehold.it/100">
<div class="text">Bla bla</div>
</div>
</div>