Please refer below code
HTML
<div>
<style type="text/css">
.row, .thumbnails
{
margin-left: 0;
}
.span4
{
width: 228px;
}
.thumbnail
{
width: 90%;
height: 90%;
padding: 0;
overflow: hidden;
position: relative;
border: 0;
border-radius: 0;
box-shadow: none;
text-align: center;
background: #191a1c;
}
.thumbnail .more
{
display: block;
z-index: 4;
position: absolute;
top: -100px;
left: 50%;
margin: 0 auto;
margin-left: -41px;
width: 80px;
height: 80px;
font-size: 40px;
color: #fff;
text-decoration: none;
line-height: 70px;
text-align: center;
}
.thumbnail:hover .more
{
top: 40%;
margin-top: -40px;
-webkit-transition: all 0.3s ease-out;
-moz-transition: all 0.3s ease-out;
-o-transition: all 0.3 s ease-out;
-ms-transition: all 0.3s ease-out;
transition: all 0.3s ease-out;
}
.thumbnail h3, .thumbnail p
{
margin: 0;
padding: 0;
position: relative;
z-index: 4;
}
.thumbnail h3
{
color: #FECE1A;
margin-top: 10px;
font-size: 20px;
}
.thumbnail > p
{
padding-bottom: 20px;
}
<%-- I have added this for Image(Dont consider it)--%>
.thumbnail img
{
width: 100px;
height: 100px;
}
</style>
<script type="text/javascript">
function LiveFeedClicked() {
alert("Hyperlink clicked");
}
</script>
<div id="dynamicControls" runat="server">
</div>
</div>
C#
protected void Page_Load(object sender, EventArgs e)
{
if (!IsPostBack)
{
DataTable dt = new DataTable();
dt.Columns.AddRange(new DataColumn[3] { new DataColumn("Headline", typeof(string)),
new DataColumn("ImagePath", typeof(string)),
new DataColumn("Identity",typeof(string)) });
dt.Rows.Add("Chrysanthemum", "Images/Chrysanthemum.jpg", "http://www.aspforums.net/");
dt.Rows.Add("Desert", "Images/Desert.jpg", "http://www.aspsnippets.com/");
dt.Rows.Add("Hydrangeas", "Images/Hydrangeas.jpg", "http://www.aspforums.net/");
dt.Rows.Add("Jellyfish", "Images/Jellyfish.jpg", "http://www.aspsnippets.com/");
dt.Rows.Add("Lighthouse", "Images/Lighthouse.jpg", "http://www.aspforums.net/");
dt.Rows.Add("Penguins", "Images/Penguins.jpg", "http://www.aspsnippets.com/");
dt.Rows.Add("Tulips", "Images/Tulips.jpg", "http://www.aspforums.net/");
StringBuilder sb = new StringBuilder(string.Empty);
sb.Append("<table>");
sb.Append("<tr>");
sb.Append("<td>");
sb.Append("<ul id=\"portfolio-grid\" class=\"thumbnails row\">");
int repeatedColumnCount = 3;
for (int i = 0; i < dt.Rows.Count; i++)
{
if (i % (repeatedColumnCount) == 0 && i != 0)
{
sb.Append("</td><td>");
sb.Append("<ul id=\"portfolio-grid\" class=\"thumbnails row\"><ul>");
}
sb.Append("<li class=\"span4 mix LiveFeeds\">");
sb.Append("<div class=\"thumbnail\">");
sb.Append("<a rel=\"#slidingDiv\" runat=\"server\" onclick=\"LiveFeedClicked()\" id=\"hrefLiveFeeds" + i + "\" href=\"" + dt.Rows[i]["Identity"].ToString() + "\" >");
sb.Append("<img runat=\"server\" alt=\"Project " + i + "\" id=\"imgLiveFeeds" + i + "\" src=" + dt.Rows[i]["ImagePath"].ToString() + "/>");
sb.Append("<h3>");
sb.Append("<asp:Label runat=\"server\" ID=\"lblLiveFeeds" + i + "\" >" + dt.Rows[i]["Headline"].ToString() + "</asp:Label>");
sb.Append("</h3>");
sb.Append("</a>");
sb.Append("</div>");
sb.Append("</li>");
}
sb.Append("<ul/>");
sb.Append("</td>");
sb.Append("</tr>");
sb.Append("</table>");
Literal lblDynamic = new Literal();
lblDynamic.Text = sb.ToString();
dynamicControls.Controls.Add(lblDynamic);
}
}