उस खाली जगह पर पहली पंक्ति में एक और छवि कैसे रखें?

.list-group {
    width: 100%;
}
.list-group-item-action {
    color: black;
    background: white;
}
.list-group-item-action:hover {
    background: #3d6277;
    color: white;
}
.container-fluid {
    width: 100%;
}
.search {
    width: 300px;
}
.img-fluid {
    margin: 0 auto;
}
h2 span {

	color: white; 
   font: bold 24px/45px Helvetica, Sans-Serif; 
   letter-spacing: -1px;  
   background: rgb(0, 0, 0); /* fallback color */
   background: rgba(0, 0, 0, 0.7);
   padding: 10px; 

}
h2{
   color: white;
   position: absolute; 
   top: 0px; 
   left: 50px; 
   width: 100%; 	
}
.btn {
  width:0px;
  padding:10px;
}

h6{
  font-size:22px;
  text-align: center;

}

.btn btn-primary btn-sm{
  background-color: #8064A2 !important;
}

.image { 
   position: relative; 
   width: 100%; /* for IE 6 */
}
/*
h2 span.spacer {
   padding:0 5px;
}*/


.font-size{
	font-size:10px;
  font-weight:20px;
}
.vertical{
  text-align: horizontal;
  -webkit-transform: rotate(-90deg);  /* Chrome, Safari 3.1+ */
     -moz-transform: rotate(-90deg);  /* Firefox 3.5-15 */
      -ms-transform: rotate(-90deg);  /* IE 9 */
       -o-transform: rotate(-90deg);  /* Opera 10.50-12.00 */
          transform: rotate(-90deg);
}

<div class="container-fluid">
 <div class="search">
<input type="text" class="form-control" name="search box" placeholder= "search..." [(ngModel)]="movieName">	
</div>
<br>
<div class="row">
<button type="button" class="btn btn-info btn-sm"><h6 class="vertical">Out Now</h6></button>
 <div class="list-group col-sm-2" *ngFor="let movie of movies|search:movieName;">
    <button type="button" (click)="detail(movie.id)" class="list-group-item list-group-item-action" >
    <div class="image">
<img src={{movie.img}} class="img-fluid" width="250px" height="250px" />
<h2><span class='spacer'>{{movie.name}}</span> </h2>
<span class="font-size">{{movie.genres}}</span>

</div>
</button>
 </div>
</div>
</div>