<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div class="research-today-horse"><div class="rth-table"><div class="rth-header-row"> <div class="rth-col-1" style="zoom: 120%;">Research - For Today's Horse</div><div class="rth-col-2" style="zoom: 120%;">Horses</div><div class="rth-col-3" style="zoom: 120%;">Starts</div><div class="rth-col-4" style="zoom: 120%;">Wins</div><div class="rth-col-5">ITM</div><div class="rth-col-6">Win%</div><div class="rth-col-7">ITM%</div><div class="rth-col-8">ROI%</div><div class="rth-col-9">Median Payoff</div><div class="clearfix"></div></div><div class="rth-body-row"> <div class="rth-col-1" style="zoom: 120%;">Trainer : Gomez Maximo </div><div class="rth-col-2">141</div><div class="rth-col-3" style="zoom: 120%;">276</div><div class="rth-col-4">50</div><div class="rth-col-5">142</div><div class="rth-col-6">18%</div><div class="rth-col-7">51%</div><div class="rth-col-8">-44%</div><div class="rth-col-9">6.00</div><div class="clearfix"></div></div><div class="rth-body-row"> <div class="rth-col-1">Jockey : Tolentino Yashira </div><div class="rth-col-2">17</div><div class="rth-col-3">27</div><div class="rth-col-4">0</div><div class="rth-col-5">4</div><div class="rth-col-6">0%</div><div class="rth-col-7">15%</div><div class="rth-col-8">-100%</div><div class="rth-col-9">N/A</div><div class="clearfix"></div></div><div class="rth-body-row"> <div class="rth-col-1">Sire : Devil His Due</div><div class="rth-col-2">236</div><div class="rth-col-3">2277</div><div class="rth-col-4">290</div><div class="rth-col-5">844</div><div class="rth-col-6">13%</div><div class="rth-col-7">37%</div><div class="rth-col-8">-23%</div><div class="rth-col-9">7.90</div><div class="clearfix"></div></div><div class="rth-body-row"> <div class="rth-col-1">Dam : Aptitude in Me</div><div class="rth-col-2">1</div><div class="rth-col-3">1</div><div class="rth-col-4">0</div><div class="rth-col-5">0</div><div class="rth-col-6">0%</div><div class="rth-col-7">0%</div><div class="rth-col-8">-100%</div><div class="rth-col-9">N/A</div><div class="clearfix"></div></div></div></div> <div class="zoom"> <div class="zoom-text"></div> </div> <script> $(document).mousemove(function(event){ $('.zoom').css('top',event.pageY); $('.zoom').css('left',event.pageX); var target = $(event.target); var text=target.text(); $('.zoom-text').text(text); }); </script>

body{ background:#FFF; cursor:none; overflow:hidden; } p{ font-family: serif; margin:20px; font-size: 16px; line-height:1; } .zoom{ width: 175px; height: 175px; position: absolute; border-radius: 100%; text-align:center; /*Multiple box shadows to achieve the glass effect*/ box-shadow: 0 0 0 7px rgba(255, 255, 255, 0.85), 0 0 7px 7px rgba(0, 0, 0, 0.25), inset 0 0 40px 2px rgba(0, 0, 0, 0.25); } .research-today-horse {margin-top: 5px; margin-bottom: 5px;padding: 0 5px;text-align:center;border-bottom: 1px solid #dcdcdc;font-size:8px;} .rth-header-row{font-weight:600} .rth-col-1{float:left;width:18%;padding:2px 5px; text-align:left} .rth-col-2{float:left;width:7%;padding:2px 5px;text-align:right} .rth-col-3{float:left;width:7%;padding:2px 5px;text-align:right} .rth-col-4{float:left;width:7%;padding:2px 5px;text-align:right} .rth-col-5{float:left;width:7%;padding:2px 5px;text-align:right} .rth-col-6{float:left;width:7%;padding:2px 5px;text-align:right} .rth-col-7{float:left;width:7%;padding:2px 5px;text-align:right} .rth-col-8{float:left;width:7%;padding:2px 5px;text-align:right} .rth-col-9{float:left;width:10%;padding:2px 0px;text-align:right} .zoom-text{width:100px;height:90px;position:relative;font-size:24px;padding-top:24%;overflow:hidden;margin:0px auto;}