Description does not show in the right position - css

Question

I have a grid of images like this:
<div class="city-container container" id="popupContainer">
<div class="row">
<div class="col col-33">
<img src="img/images/opera.jpg" ng-click="showTabDialogOpera($event)"/>
<div class="description" style="font-size: 8pt"><strong>Opera de Lyon</strong></div>
</div>
<div class="col col-33">
<img src="img/Image1.jpg" ng-click="showTabDialogBasilique($event)"/>
<div class="description" style="font-size: 8pt"><strong>Basilique de Fourvière</strong></div>
</div>
<div class="col col-33">
<img src="img/images/hoteldeville.jpg" ng-click="showTabDialogHotel($event)"/>
<div class="description" style="font-size: 8pt"><strong>Hotel de villde de Lyon</strong></div>
</div>
</div>
The problem is that the description does not show in the right position.
CSS:
.city-container .description {
position: absolute;
width: 90%;
text-align: center;
padding: 5px;
line-height: 1.5;
background-color: rgba(204, 204, 204, 0.6);
}

Answer 1

I'm not really sure what you're trying to achieve.
If you want the description to show up next to the image, try relpacing
position: absolute;
with
display: inline-block;
Update
I have updated the CSS. Sorry for the delay.
I scaled the image to fit the width of the column. Hope that meets your requirement.
.col-33 {
width: 32%;
display: inline-block;
}
.col-33 img {
width: 100%;
}
.col-33 .description {
width: 100%;
text-align: center;
padding: 5px 0px;
line-height: 1.5;
background-color: rgba(204, 204, 204, 0.6);
}
<div class="city-container container" id="popupContainer">
<div class="row">
<div class="col col-33">
<img src="http://dummyimage.com/150x50/00cf75/fff.png&text=IMG" ng-click="showTabDialogOpera($event)"/>
<div class="description" style="font-size: 8pt"><strong>Opera de Lyon</strong></div>
</div>
<div class="col col-33">
<img src="http://dummyimage.com/150x50/00cf75/fff.png&text=IMG" ng-click="showTabDialogBasilique($event)"/>
<div class="description" style="font-size: 8pt"><strong>Basilique de Fourvière</strong></div>
</div>
<div class="col col-33">
<img src="http://dummyimage.com/150x50/00cf75/fff.png&text=IMG" ng-click="showTabDialogHotel($event)"/>
<div class="description" style="font-size: 8pt"><strong>Hotel de villde de Lyon</strong></div>
</div>
</div>