<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div id="window" class="magnify" data-magnified-zone=".mg_zone"> <div class="magnify_glass"> <div class="mg_ring"></div> <div class="pm_btn plus"><h2>+</h2></div> <div class="pm_btn minus"><h2>-</h2></div> <div class="mg_zone"></div> </div> <div class = "element_to_magnify"> <a target="_blank" href="https://hpitgroup.glitch.me/"> HP IT GROUP (TEBİM TEBİTAGEM TTGRT)</a> <iframe src="//www.slideshare.net/slideshow/embed_code/key/DdmHWvWc7k6ffC" width="668" height="714" frameborder="0" marginwidth="0" marginheight="0" scrolling="no" style="border:1px solid #CCC; border-width:1px; margin-bottom:5px; max-width: 100%;" allowfullscreen> </iframe> </div> </div>

@charset "UTF-8"; * { box-sizing:border-box; margin-top: 0px; } body, html { width:100%; height:100%; } body { font-family:Sans-Serif; padding: 0px; background-color: #333; color: #FFF; margin:0px; padding: 0px; } .magnify { z-index: 20; border: 3px solid #999; position: relative; width:900px; height:640px; margin:0px auto; overflow: hidden; user-select: none; -moz-user-select: none; -webkit-user-select: none; } .magnify img { display:block; } .element_to_magnify { position: relative; width:900px; height:640px; overflow: hidden; } .element_to_magnify a { display:block; position:absolute; top:80px; right:80px; background-color:rgba(200, 200, 200, .25); padding:4px; font-size:18px; color:#fff; } .element_to_magnify img{ width: 100%; height: auto; } .magnified_element { } .magnify_glass { z-index: 300; position: absolute; width: 200px; height: 200px; cursor: move; } .mg_ring { pointer-events: none; background:none; position: absolute; -moz-box-shadow: inset 0 0 10px #000000; -webkit-box-shadow: inset 0 0 10px #000000; -ms-box-shadow: inset 0 0 10px #000000; box-shadow: inset 0 0 10px #000000; border: 4px solid #CCC; border-radius: 50%; width: 100%; height: 100%; z-index: 20; } .mg_zone { position: absolute; border-radius: 50%; top:0px; left: 0px; width: 100%; height: 100%; z-index: 10; overflow:hidden; } .pm_btn { border: 4px solid #CCC; z-index: 30; color: #333; position: absolute; width: 40px; height: 40px; background-color: #fff; border-radius: 50%; } .pm_btn h2{ text-align: center; user-select: none; cursor: pointer; } .minus { right:-24px; bottom:30px; } .plus { right:0px; bottom:-5px; } .button { width:30px; height: 30px; padding-top: 5px; overflow: hidden; border-radius: 50%; background-color: rgba(50, 50, 50, .5); position: absolute; text-indent: -999em; border:solid black 1px; }

// the jfMagnify plugin and other demo files can be found // https://github.com/fonstok/jfMagnify $(document).ready(function() { var scaleNum = 2; $(".magnify").jfMagnify(); $('.plus').click(function(){ scaleNum += 1; if (scaleNum >=10) { scaleNum = 10; }; $(".magnify").data("jfMagnify").scaleMe(scaleNum); }); $('.minus').click(function(){ scaleNum -= 1; if (scaleNum <=2) { scaleNum = 2; }; $(".magnify").data("jfMagnify").scaleMe(scaleNum); }); $('.magnify_glass').animate({ 'top':'60%', 'left':'60%' },{ duration: 2000, progress: function(){ $(".magnify").data("jfMagnify").update(); }, easing: "easeOutElastic" }); });