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>