Change image color on mouse hover like Flipkart, Snapdeal and Amazon in ASP.Net

Last Reply on Mar 20, 2017 09:39 AM By AnandM

Posted on Mar 20, 2017 06:36 AM

 

link rel="stylesheet" type="text/css" href="css/materialdesignicons.min.css" />
    <link rel="stylesheet" type="text/css" href="css/responsive.css" />
    <link href="css/bootstrap.min.css" rel="stylesheet" type="text/css" />
    <link rel="stylesheet" type="text/css" href="css/plugins/animate.css" />
    <link rel="stylesheet" type="text/css" href="css/plugins/animated-headlines.css" />
    <link rel="stylesheet" type="text/css" href="css/plugins/jquery-ui.min.css" />
    <link rel="stylesheet" type="text/css" href="css/plugins/jquery.mb.YTPlayer.min.css" />
    <link rel="stylesheet" type="text/css" href="css/plugins/magnific-popup.css" />
    <link rel="stylesheet" type="text/css" href="css/plugins/meanmenu.min.css" />
    <link rel="stylesheet" type="text/css" href="css/plugins/nivo-slider.css" />
    <link rel="stylesheet" type="text/css" href="css/plugins/slick.css" />
 <style>
        .our-gallery .bg-img-2
        {
            background: url(images/gallery/bg-2.png)no-repeat scroll right bottom;
            padding-bottom: 50px;
            padding-top: 80px;
        }
        .col-md-offset-2
        {
            margin-left: 16.66666667%;
        }
        .our-gallery
        {
            position: relative;
            background: url(http://www.maurizioca.com/wp-content/uploads/2015/05/hummingbird-algorithm-inbound-marketing-seo.png)no-repeat scroll left top;
            background-color: #f1f1f1;
            background-size: 23%;
            background-position: -17px -15px;
            margin-left: 41px;
            margin-right: 41px;
        }
        .gallery-menu ul li
        {
            color: #535353;
            cursor: pointer;
            display: inline-block;
            font-weight: 600;
            margin-left: 35px;
            text-transform: uppercase;
        }
        default.css:122 li
        {
            list-style: none;
        }
        .gallery-menu ul li.active
        {
            color: #e54c2a;
        }
        .single-item-gallery:hover img
        {
            -webkit-transform: scale(1.1);
            transform: scale(1.1);
        }
        style.css:557 .single-item-gallery > img
        {
            -webkit-transition: all 0.5s ease 0s;
            transition: all 0.5s ease 0s;
        }
        .single-item-gallery a
        {
            background: #fff none repeat scroll 0 0;
            border-radius: 50%;
            color: #e54c2a;
            font-size: 22px;
            height: 40px;
            left: 0;
            line-height: 40px;
            margin: -20px auto 0;
            opacity: 0;
            -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
            position: absolute;
            right: 0;
            text-align: center;
            top: 50%;
            -webkit-transform: scale(0.2);
            transform: scale(0.2);
            -webkit-transition: all 400ms cubic-bezier(1, -0.6, 0.57, -0.15) 0s;
            transition: all 400ms cubic-bezier(1, -0.6, 0.57, -0.15) 0s;
            width: 40px;
            z-index: 999;
        }
        .mdi
        {
            display: inline-block;
            font: normal normal normal 24px/1 "Material Design Icons";
            font-size: inherit;
            text-rendering: auto;
            -webkit-font-smoothing: antialiased;
            -moz-osx-font-smoothing: grayscale;
            transform: translate(0, 0);
        }
        .mfp-container
        {
            text-align: center;
            position: absolute;
            width: 100%;
            height: 100%;
            left: 0;
            top: 0;
            padding: 0 8px;
            box-sizing: border-box;
        }
    </style>

 

   <div class="our-gallery">
        <div class="bg-img-2">
            <div class="container">
                <div class="row">
                    <div class="col-md-8 col-md-offset-2">
                        <div class="section-title grey_bg mb-50 text-center">
                            <h2 class="mb-50">
                                our gallery</h2>
                            <p>
                                Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
                                incididunt ut labore et dolore magna aliqua. Ut enim ad minim nostrud exercitation
                                ullamco laboris nisi.</p>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-md-12">
                            <div class="gallery-menu fix text-center mb-60">
                                <ul>
                                    <li class="active" data-filter="*">all</li>
                                    <li data-filter=".babylon">babylon</li>
                                    <li data-filter=".nasa">nasa</li>
                                    <li data-filter=".malgudi">malgudi days</li>
                                    <li data-filter=".sweets">sweets &amp; namkin</li>
                                    <li data-filter=".hotel">hotel</li>
                                </ul>
                            </div>
                            <div class="gallery-item-box row" style="position: relative; height: 1548px;">
                                <div class="col-md-4 col-sm-6 col-xs-12 gallery-item babylon mb-30" style="position: absolute;
                                    left: 0px; top: 0px;">
                                    <div class="single-item-gallery">
                                        <a href="images/gallery/1.jpg"><span class="plus"><i class="mdi mdi-plus"></i></span>
                                        </a>
                                        <img src="images/gallery/1.jpg" alt="">
                                    </div>
                                </div>
                                <div class="col-md-4 col-sm-6 col-xs-12 gallery-item babylon mb-30" style="position: absolute;
                                    left: 390px; top: 0px;">
                                    <div class="single-item-gallery">
                                        <a href="images/gallery/2.jpg"><span class="plus"><i class="mdi mdi-plus"></i></span>
                                        </a>
                                        <img src="images/gallery/2.jpg" alt="">
                                    </div>
                                </div>
                                <div class="col-md-4 col-sm-6 col-xs-12 gallery-item babylon mb-30" style="position: absolute;
                                    left: 780px; top: 0px;">
                                    <div class="single-item-gallery">
                                        <a href="images/gallery/3.jpg"><span class="plus"><i class="mdi mdi-plus"></i></span>
                                        </a>
                                        <img src="images/gallery/3.jpg" alt="">
                                    </div>
                                </div>
                                <div class="col-md-4 col-sm-6 col-xs-12 gallery-item nasa mb-30" style="position: absolute;
                                    left: 0px; top: 258px;">
                                    <div class="single-item-gallery">
                                        <a href="images/gallery/4.jpg"><span class="plus"><i class="mdi mdi-plus"></i></span>
                                        </a>
                                        <img src="images/gallery/4.jpg" alt="">
                                    </div>
                                </div>
                                <div class="col-md-4 col-sm-6 col-xs-12 gallery-item nasa mb-30" style="position: absolute;
                                    left: 390px; top: 258px;">
                                    <div class="single-item-gallery">
                                        <a href="images/gallery/5.jpg"><span class="plus"><i class="mdi mdi-plus"></i></span>
                                        </a>
                                        <img src="images/gallery/5.jpg" alt="">
                                    </div>
                                </div>
                                <div class="col-md-4 col-sm-6 col-xs-12 gallery-item nasa mb-30" style="position: absolute;
                                    left: 780px; top: 258px;">
                                    <div class="single-item-gallery">
                                        <a href="images/gallery/6.jpg"><span class="plus"><i class="mdi mdi-plus"></i></span>
                                        </a>
                                        <img src="images/gallery/6.jpg" alt="">
                                    </div>
                                </div>
                                <div class="col-md-4 col-sm-6 col-xs-12 gallery-item malgudi mb-30" style="position: absolute;
                                    left: 0px; top: 516px;">
                                    <div class="single-item-gallery">
                                        <a href="images/gallery/7.jpg"><span class="plus"><i class="mdi mdi-plus"></i></span>
                                        </a>
                                        <img src="images/gallery/7.jpg" alt="">
                                    </div>
                                </div>
                                <div class="col-md-4 col-sm-6 col-xs-12 gallery-item malgudi mb-30" style="position: absolute;
                                    left: 390px; top: 516px;">
                                    <div class="single-item-gallery">
                                        <a href="images/gallery/8.jpg"><span class="plus"><i class="mdi mdi-plus"></i></span>
                                        </a>
                                        <img src="images/gallery/8.jpg" alt="">
                                    </div>
                                </div>
                                <div class="col-md-4 col-sm-6 col-xs-12 gallery-item malgudi mb-30" style="position: absolute;
                                    left: 780px; top: 516px;">
                                    <div class="single-item-gallery">
                                        <a href="images/gallery/9.jpg"><span class="plus"><i class="mdi mdi-plus"></i></span>
                                        </a>
                                        <img src="images/gallery/9.jpg" alt="">
                                    </div>
                                </div>
                                <div class="col-md-4 col-sm-6 col-xs-12 gallery-item sweets mb-30" style="position: absolute;
                                    left: 0px; top: 774px;">
                                    <div class="single-item-gallery">
                                        <a href="images/gallery/10.jpg"><span class="plus"><i class="mdi mdi-plus"></i></span>
                                        </a>
                                        <img src="images/gallery/10.jpg" alt="">
                                    </div>
                                </div>
                                <div class="col-md-4 col-sm-6 col-xs-12 gallery-item sweets mb-30" style="position: absolute;
                                    left: 390px; top: 774px;">
                                    <div class="single-item-gallery">
                                        <a href="images/gallery/11.jpg"><span class="plus"><i class="mdi mdi-plus"></i></span>
                                        </a>
                                        <img src="images/gallery/11.jpg" alt="">
                                    </div>
                                </div>
                                <div class="col-md-4 col-sm-6 col-xs-12 gallery-item sweets mb-30" style="position: absolute;
                                    left: 780px; top: 774px;">
                                    <div class="single-item-gallery">
                                        <a href="images/gallery/12.jpg"><span class="plus"><i class="mdi mdi-plus"></i></span>
                                        </a>
                                        <img src="images/gallery/12.jpg" alt="">
                                    </div>
                                </div>
                                <div class="col-md-4 col-sm-6 col-xs-12 gallery-item sweets mb-30" style="position: absolute;
                                    left: 0px; top: 1032px;">
                                    <div class="single-item-gallery">
                                        <a href="images/gallery/13.jpg"><span class="plus"><i class="mdi mdi-plus"></i></span>
                                        </a>
                                        <img src="images/gallery/13.jpg" alt="">
                                    </div>
                                </div>
                                <div class="col-md-4 col-sm-6 col-xs-12 gallery-item hotel mb-30" style="position: absolute;
                                    left: 390px; top: 1032px;">
                                    <div class="single-item-gallery">
                                        <a href="images/gallery/14.jpg"><span class="plus"><i class="mdi mdi-plus"></i></span>
                                        </a>
                                        <img src="images/gallery/14.jpg" alt="">
                                    </div>
                                </div>
                                <div class="col-md-4 col-sm-6 col-xs-12 gallery-item hotel mb-30" style="position: absolute;
                                    left: 780px; top: 1032px;">
                                    <div class="single-item-gallery">
                                        <a href="images/gallery/15.jpg"><span class="plus"><i class="mdi mdi-plus"></i></span>
                                        </a>
                                        <img src="images/gallery/15.jpg" alt="">
                                    </div>
                                </div>
                                <div class="col-md-4 col-sm-6 col-xs-12 gallery-item hotel mb-30" style="position: absolute;
                                    left: 0px; top: 1290px;">
                                    <div class="single-item-gallery">
                                        <a href="images/gallery/16.jpg"><span class="plus"><i class="mdi mdi-plus"></i></span>
                                        </a>
                                        <img src="images/gallery/16.jpg" alt="">
                                    </div>
                                </div>
                                <div class="col-md-4 col-sm-6 col-xs-12 gallery-item hotel mb-30" style="position: absolute;
                                    left: 390px; top: 1290px;">
                                    <div class="single-item-gallery">
                                        <a href="images/gallery/17.jpg"><span class="plus"><i class="mdi mdi-plus"></i></span>
                                        </a>
                                        <img src="images/gallery/17.jpg" alt="">
                                    </div>
                                </div>
                                <div class="col-md-4 col-sm-6 col-xs-12 gallery-item hotel mb-30" style="position: absolute;
                                    left: 780px; top: 1290px;">
                                    <div class="single-item-gallery">
                                        <a href="images/gallery/18.jpg"><span class="plus"><i class="mdi mdi-plus"></i></span>
                                        </a>
                                        <img src="images/gallery/18.jpg" alt="">
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

i want to display like  when i do mouse hover image color should change to oranage and it should display + sing on mouse hover when i clicck on it it should open image

Posted on Mar 20, 2017 09:39 AM Modified on on Mar 20, 2017 09:41 AM

Hi jordan,

I have created a sample which full fill your requirement you need to modify the code according to your need.

I have taken a reference of below two links

Share Image, Photo Pictures on Facebook in ASP.Net using Graph API

Create product details page like ecommerce Website using jQuery in ASP.Net

HTML

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <style type="text/css">
        .our-gallery .bg-img-2
        {
            background: url(http://farm3.staticflickr.com/2837/10379605235_5e95702e08_n.jpg)no-repeat scroll right bottom;
            padding-bottom: 50px;
            padding-top: 80px;
        }
        .col-md-offset-2
        {
            margin-left: 16.66666667%;
        }
        .our-gallery
        {
            position: relative;
            background: url(http://www.maurizioca.com/wp-content/uploads/2015/05/hummingbird-algorithm-inbound-marketing-seo.png)no-repeat scroll left top;
            background-color: #f1f1f1;
            background-size: 23%;
            background-position: -17px -15px;
            margin-left: 41px;
            margin-right: 41px;
        }
        .gallery-menu ul li
        {
            color: #535353;
            cursor: pointer;
            display: inline-block;
            font-weight: 600;
            margin-left: 35px;
            text-transform: uppercase;
        }
        default.css:122 li
        {
            list-style: none;
        }
        .gallery-menu ul li.active
        {
            color: #e54c2a;
        }
        .single-item-gallery:hover img
        {
            -webkit-transform: scale(1.1);
            transform: scale(1.1);
        }
        style.css:557 .single-item-gallery > img
        {
            -webkit-transition: all 0.5s ease 0s;
            transition: all 0.5s ease 0s;
        }
        .single-item-gallery a
        {
            background: #fff none repeat scroll 0 0;
            border-radius: 50%;
            color: #e54c2a;
            font-size: 22px;
            height: 40px;
            left: 0;
            line-height: 40px;
            margin: -20px auto 0;
            opacity: 0;
            -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
            position: absolute;
            right: 0;
            text-align: center;
            top: 50%;
            -webkit-transform: scale(0.2);
            transform: scale(0.2);
            -webkit-transition: all 400ms cubic-bezier(1, -0.6, 0.57, -0.15) 0s;
            transition: all 400ms cubic-bezier(1, -0.6, 0.57, -0.15) 0s;
            width: 40px;
            z-index: 999;
        }
        .mdi
        {
            display: inline-block;
            font: normal normal normal 24px/1 "Material Design Icons";
            font-size: inherit;
            text-rendering: auto;
            -webkit-font-smoothing: antialiased;
            -moz-osx-font-smoothing: grayscale;
            transform: translate(0, 0);
        }
        .mfp-container
        {
            text-align: center;
            position: absolute;
            width: 100%;
            height: 100%;
            left: 0;
            top: 0;
            padding: 0 8px;
            box-sizing: border-box;
        }
    </style>
    <style type="text/css">
        .info
        {
            background-color: Orange;
            filter: alpha(opacity=80);
            opacity: 0.8;
            position: absolute;
            display: block;
            text-align: center !important;
        }
        .info button
        {
            position: relative;
            top: 45%;
        }
        .thumbnail
        {
            border: none !important;
        }
    </style>
    <script type="text/javascript" src="//code.jquery.com/jquery-1.11.0.min.js"></script>
    <script type="text/javascript" src="//code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
    <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick-theme.min.css" />
    <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick.css" />
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick.min.js"></script>
    <script type="text/javascript" src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
    <script type="text/javascript">
        $(function () {
            var info = $(".info");
            $(".picture").bind("mouseenter", function () {
                var p = GetScreenCordinates(this);
                $("input", info).attr("rel", this.src);
                $('[id*=imgSelectedProduct]').attr('src', $(this).attr('src'));
                info.show();
                info.css("height", $(this)[0].offsetHeight);
                info.css("width", $(this).width());
                info.css({ "left": p.x, "top": p.y + this.offsetHeight - info[0].offsetHeight });
            });
            $(".info button").bind("mouseenter, mousemove, mouseover", function () {
                info.show();
            });
            $(".picture").bind("mouseleave", function () {
                info.hide();
            });
            $("[id*=imgPopUp]").bind("click", function () {
                $(".picture")
                $('[id*=lblDescription]').html('Your Description');
                $('[id*=lblModalTitle]').html('Your Title');
                $('[id*=myModal]').modal('show');
                return false;
            });
        });

        function GetScreenCordinates(obj) {
            var p = {};
            p.x = obj.offsetLeft;
            p.y = obj.offsetTop;
            while (obj.offsetParent) {
                p.x = p.x + obj.offsetParent.offsetLeft;
                p.y = p.y + obj.offsetParent.offsetTop;
                if (obj == document.getElementsByTagName("body")[0]) {
                    break;
                }
                else {
                    obj = obj.offsetParent;
                }
            }
            return p;
        }
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <div class="our-gallery">
            <div class="bg-img-2">
                <div class="container">
                    <div class="row">
                        <div class="col-md-8 col-md-offset-2">
                            <div class="section-title grey_bg mb-50 text-center">
                                <h2 class="mb-50">
                                    our gallery</h2>
                                <p>
                                    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
                                    incididunt ut labore et dolore magna aliqua. Ut enim ad minim nostrud exercitation
                                    ullamco laboris nisi.</p>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-md-12">
                                <div class="gallery-menu fix text-center mb-60">
                                    <ul>
                                        <li class="active" data-filter="*">all</li>
                                        <li data-filter=".babylon">babylon</li>
                                        <li data-filter=".nasa">nasa</li>
                                        <li data-filter=".malgudi">malgudi days</li>
                                        <li data-filter=".sweets">sweets &amp; namkin</li>
                                        <li data-filter=".hotel">hotel</li>
                                    </ul>
                                </div>
                                <div class="gallery-item-box row" style="position: relative; height: 1548px;">
                                    <div class="col-md-4 col-sm-6 col-xs-12 gallery-item babylon mb-30" style="position: absolute;
                                        left: 0px; top: 0px;">
                                        <div class="single-item-gallery">
                                            <a href="http://farm3.staticflickr.com/2854/10380193164_9b65e4c5ed_n.jpg"><span class="plus">
                                                <i class="mdi mdi-plus"></i></span></a>
                                            <img src="http://farm3.staticflickr.com/2854/10380193164_9b65e4c5ed_n.jpg" class="picture"
                                                alt="" height="200" width="200" />
                                        </div>
                                    </div>
                                    <div class="col-md-4 col-sm-6 col-xs-12 gallery-item babylon mb-30" style="position: absolute;
                                        left: 390px; top: 0px;">
                                        <div class="single-item-gallery">
                                            <a href="http://farm8.staticflickr.com/7395/10380186284_4f9ac522ed_n.jpg"><span class="plus">
                                                <i class="mdi mdi-plus"></i></span></a>
                                            <img src="http://farm8.staticflickr.com/7395/10380186284_4f9ac522ed_n.jpg" class="picture"
                                                alt="" height="200" width="200" />
                                        </div>
                                    </div>
                                    <div class="col-md-4 col-sm-6 col-xs-12 gallery-item babylon mb-30" style="position: absolute;
                                        left: 780px; top: 0px;">
                                        <div class="single-item-gallery">
                                            <a href="http://farm8.staticflickr.com/7424/10380408813_3cd984570d_n.jpg"><span class="plus">
                                                <i class="mdi mdi-plus"></i></span></a>
                                            <img src="http://farm8.staticflickr.com/7424/10380408813_3cd984570d_n.jpg" class="picture"
                                                alt="" height="200" width="200" />
                                        </div>
                                    </div>
                                    <div class="col-md-4 col-sm-6 col-xs-12 gallery-item nasa mb-30" style="position: absolute;
                                        left: 0px; top: 258px;">
                                        <div class="single-item-gallery">
                                            <a href="http://farm4.staticflickr.com/3723/8986453414_a869ddc3aa_n.jpg"><span class="plus">
                                                <i class="mdi mdi-plus"></i></span></a>
                                            <img src="http://farm4.staticflickr.com/3723/8986453414_a869ddc3aa_n.jpg" class="picture"
                                                alt="" height="200" width="200" />
                                        </div>
                                    </div>
                                    <div class="col-md-4 col-sm-6 col-xs-12 gallery-item nasa mb-30" style="position: absolute;
                                        left: 390px; top: 258px;">
                                        <div class="single-item-gallery">
                                            <a href="http://farm8.staticflickr.com/7130/6885958326_ecbb33e962_n.jpg"><span class="plus">
                                                <i class="mdi mdi-plus"></i></span></a>
                                            <img src="http://farm8.staticflickr.com/7130/6885958326_ecbb33e962_n.jpg" class="picture"
                                                alt="" height="200" width="200" />
                                        </div>
                                    </div>
                                    <div class="col-md-4 col-sm-6 col-xs-12 gallery-item nasa mb-30" style="position: absolute;
                                        left: 780px; top: 258px;">
                                        <div class="single-item-gallery">
                                            <a href="http://farm8.staticflickr.com/7051/7032054587_5f15e32a10_n.jpg"><span class="plus">
                                                <i class="mdi mdi-plus"></i></span></a>
                                            <img src="http://farm8.staticflickr.com/7051/7032054587_5f15e32a10_n.jpg" class="picture"
                                                alt="" height="200" width="200" />
                                        </div>
                                    </div>
                                    <div class="col-md-4 col-sm-6 col-xs-12 gallery-item malgudi mb-30" style="position: absolute;
                                        left: 0px; top: 516px;">
                                        <div class="single-item-gallery">
                                            <a href="http://farm8.staticflickr.com/7228/6885959482_670fb32b58_n.jpg"><span class="plus">
                                                <i class="mdi mdi-plus"></i></span></a>
                                            <img src="http://farm8.staticflickr.com/7228/6885959482_670fb32b58_n.jpg" class="picture"
                                                alt="" height="200" width="200" />
                                        </div>
                                    </div>
                                    <div class="col-md-4 col-sm-6 col-xs-12 gallery-item malgudi mb-30" style="position: absolute;
                                        left: 390px; top: 516px;">
                                        <div class="single-item-gallery">
                                            <a href="http://farm8.staticflickr.com/7380/10379642624_89b111ef11_n.jpg"><span class="plus"><i class="mdi mdi-plus"></i>
                                            </span></a>
                                            <img src="http://farm8.staticflickr.com/7380/10379642624_89b111ef11_n.jpg" class="picture" alt="" height="200" width="200" />
                                        </div>
                                    </div>
                                    <div class="col-md-4 col-sm-6 col-xs-12 gallery-item malgudi mb-30" style="position: absolute;
                                        left: 780px; top: 516px;">
                                        <div class="single-item-gallery">
                                            <a href="http://farm8.staticflickr.com/7120/7032057469_ce0c1620d4_n.jpg"><span class="plus">
                                                <i class="mdi mdi-plus"></i></span></a>
                                            <img src="http://farm8.staticflickr.com/7120/7032057469_ce0c1620d4_n.jpg" class="picture"
                                                alt="" height="200" width="200" />
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="info" style="display: none">
        <button style="background-color: Black; color: White;" class="btn btn-theme-secondary"
            id="imgPopUp">
            Quick View
        </button>
    </div>
    <div class="modal" id="myModal" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button class="close" data-dismiss="modal" aria-hidden="true">
                        &times;</button>
                    <h4 class="modal-title">
                        <asp:Label ID="lblModalTitle" runat="server"></asp:Label></h4>
                </div>
                <div class="modal-body">
                    <div class="row">
                        <div class="thumbnail">
                            <img id="imgSelectedProduct" alt="" />
                            <div class="caption">
                                Your Description:- <b>
                                    <asp:Label ID="lblDescription" runat="server" /></b>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button class="btn btn-info" data-dismiss="modal" aria-hidden="true">
                        Close</button>
                </div>
            </div>
        </div>
    </div>
    </form>
</body>
</html>

Demo