jordan says:
str += @"<div class='row col-md-3 col-xs-6 hovereffect'>
                                        <img class='imges'  style='height:220px;' src='images/ProductPearl/" + objpp.ListclsProductPearlMain[j].ProductID + ".jpg" + @"' />
                                         <p class='sname'>" + objpp.ListclsProductPearlMain[j].ProductName + @"</p>
                                        <p class='sname2'>" + objpp.ListclsProductPearlMain[j].MRP + @"</p>
                                </div>";
 replace above code with below
str += @"<div class='row col-md-3 col-xs-6 hovereffect'>
                        <div class='imageBackGround' style='width:250px;height:280px;'>
                        <img class='imges'  style='height:220px;' src='images/ProductPearl/" + objpp.ListclsProductPearlMain[j].ProductID + ".jpg" + @"' />
                            <p class='sname'>" + objpp.ListclsProductPearlMain[j].ProductName + @"</p>
                        <p class='sname2'>" + objpp.ListclsProductPearlMain[j].MRP + @"</p></div><br/>
        </div>";
And add css to your html page
<style type="text/css">
    .imageBackGround
    {
        text-decoration: none;
        background-color: #F2F2F2;
        color: #333333;
        padding: 10px 10px 10px 10px;
    }
</style>