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>