HTML/CSS making 3 images in line responsive and well designed - html

Question

Im trying to make these images to be displayed nicely inline and change its position/size depending on the screen size. This is my HTML code:
<div class="row tryRow white">
<div class="col-xs-4 portfolio-item leftPic">
<div class="imgWrap">
<img class="img-responsive" src="~/img/FMA.png" />
<p class="imgDescription">
Some text in here </p>
</div>
</div>
<div class="col-xs-4 portfolio-item centerPic">
<div class="imgWrap">
<img class="img-responsive" src="~/img/SFK.png" />
<p class="imgDescription">
Some text in here
</p>
</div>
</div>
<div class="col-xs-4 portfolio-item rightPic">
<div class="imgWrap">
<img class="img-responsive" src="~/img/CTG.png" />
<p class="imgDescription">
Some text in here </p>
</div>
</div>
</div>
These images display some text below them when they are hovered on.
This is CSS of one of the images:
.leftPic {
opacity:0.5;
border-radius:4px;
max-width: 33%;
width:auto;
}
As you can see I am trying to set the max width to 33% as I have 3 images per line, but the margins are not correct and to be honest there is a large problem with this.
Problem: To make them shrink, re-position depending on the browser while keeping the relatively sharp look.

Answer 1

i tried with this one:
.tryRow{ display: inline-block;}

Answer 2

Hmmm... I would approach it in a different way setting background-image instead of using html <img>. As you expect nice responsive behavior and your images are quite small have a look at this:
<div class="row">
<div class="col-md-4">
<div class="image image-1">Some text</div>
</div>
<div class="col-md-4">
<div class="image image-2">Some text</div>
</div>
<div class="col-md-4">
<div class="image image-3">Some text</div>
</div>
</div>
.image {
background-position: center center;
background-repeat: no-repeat;
-webkit-background-size: cover;
background-size: cover;
// height: control it with media queries
}
.image-1 {
background-image: url(path/to/image-1.jpg);
}
.image-2 {
background-image: url(path/to/image-2.jpg);
}
.image-3 {
background-image: url(path/to/image-3.jpg);
}
This approach will also give you more flexibility styling those boxes content.