Resize image in ionic cards - css

Question

I want display a set of images with a description below. I chose to use Ionic cards.
I got this result (the first image):
While I want to preserve the same layout I have now, and add a description.
Here is my code:
<ion-content ng-controller="cityController">
<div class="row">
<div class="col col-33">
<div class="list card">
<div class="item item-body">
<img class="full-image"src="img/images/opera.jpg"/>
This is a "Facebook" styled Card..
</div>
</div>
</div>
<div class="col col-33">
<img src="img/images/basilique.jpg"/>
</div>
<div class="col col-33">
<img src="img/images/hoteldeville.jpg"/>
</div>
</div>
.center {
text-align: center;
}
.col {
overflow: hidden;
}
.row {
overflow: hidden;
height: 180px;
}
.fullscreen {
width: 100%;
height: 100%;
}
How can I fix this?
UPDATE

Answer 1

You have to change your source little bit.
Example HTML:
<div class="row">
<div class="col col-33">
<img class="full-image" src="http://www.w3schools.com/css/img_fjords.jpg"/>
<div class="card-description">This is a "Facebook" styled Card..</div>
</div>
<div class="col col-33">
<img class="full-image" src="http://www.w3schools.com/css/img_forest.jpg"/>
<div class="card-description">This is a "Facebook" styled Card..</div>
</div>
<div class="col col-33">
<img class="full-image" src="http://www.w3schools.com/css/img_mountains.jpg"/>
<div class="card-description">This is a "Facebook" styled Card..</div>
</div>
</div>
Example CSS:
.col-33 {
width: 33%;
float:left;
}
.full-image {
width: 100%;
height: 100%;
}
.card-description {
text-align: center;
}
Live demo here
This is just an example how it can work.
UPDATE:
To have the images full sized, you need to put the description over it.
In that case this CSS is required.
.col-33 {
width: 33%;
float:left;
position: relative;
}
.full-image {
width: 100%;
height: 100%;
}
.card-description {
position: absolute;
bottom: 0;
left: 0;
right: 0;
text-align: center;
padding: 5px;
line-height: 1.5;
background-color: rgba(255, 255, 255, 0.6);
}