Put a title property on image gallery - css

Question

I need to create an image gallery as shown below. It's working fine but I need to put a title below the image (each and every image has a title). When I have tried like below - that title is not showing correctly. Can you show me how to do that?
Html
<ul id="thumbnailsList">
<li *ngFor="let image of datasource">
<img src="{{image.url}}" class="tn" data-toggle="modal" data-target="#selectedImageModal" (click)=setSelectedImage(image)>
<div class="myClass"><strong>{{image.title}}</strong></div>
</li>
</ul>
css
.myClass {
position: absolute;
}
Result :
Update :
When I removed the .myClass it shows like below.But I need to show images horizontally and text bottom of the image.

Answer 1

To make it work using position:absolute, you need to give a parent container a position property doing:
#thumbnailsList li
position: relative

Answer 2

I have done it using Bootstrap responsive design.
HTML
<div class="row">
<div *ngFor="let image of dataCollection" class="col-md-3 col-sm-4 col-xs-6">
<img class="img-responsive tn" src="{{image.blobFileUrl}}" data-toggle="modal" data-target="#selectedImageModal" (click)=setSelectedImage(image) />
<div class="desc">{{image.name}}</div>
</div>
</div>
CSS
div.desc {
padding: 15px;
text-align: center;
}
.tn {
margin: 2px 0px;
box-shadow: #999 1px 1px 3px 1px;
cursor: pointer;
width: 100% !important;
height: 200px !important;
}