Image Overlay Colorbox Responsive 3

by kompiajaib

HTML

<script src="http://www.jacklmoore.com/colorbox/jquery.colorbox.js"></script>
<script>
$(document).ready(function(){
$(".group3").colorbox({rel:'group3', transition:"none", width:"75%", height:"auto"});
});
		</script>

<p><a class="group3" href="http://www.jacklmoore.com/colorbox/content/ohoopee1.jpg" title="Me and my grandfather on the Ohoopee."><img alt="thumbnail" src="http://www.jacklmoore.com/colorbox/content/ohoopee1.jpg" width="200" height="130"/></a></p><br/>
<p><a class="group3" href="http://www.jacklmoore.com/colorbox/content/ohoopee2.jpg" title="Me and my grandfather on the Ohoopee."><img alt="thumbnail" src="http://www.jacklmoore.com/colorbox/content/ohoopee2.jpg" width="200" height="130"/></a></p><br/>
<p><a class="group3" href="http://www.jacklmoore.com/colorbox/content/ohoopee3.jpg" title="Me and my grandfather on the Ohoopee."><img alt="thumbnail" src="http://www.jacklmoore.com/colorbox/content/ohoopee3.jpg" width="200" height="130"/></a></p>

CSS

#colorbox,#cboxOverlay,#cboxWrapper{position:absolute;top:0;left:0;z-index:9999;overflow:hidden}
#cboxWrapper{max-width:none}
#cboxOverlay{position:fixed;width:100%;height:100%}
#cboxMiddleLeft,#cboxBottomLeft{clear:left}
#cboxContent{position:relative}
#cboxLoadedContent{overflow:hidden!important;-webkit-overflow-scrolling:touch}
#cboxTitle{margin:0}
#cboxLoadingOverlay,#cboxLoadingGraphic{position:absolute;top:0;left:0;width:100%;height:100%}
#cboxPrevious,#cboxNext,#cboxClose,#cboxSlideshow{cursor:pointer}
.cboxPhoto{border:0;width:100%!important;height:auto!important;margin-bottom:-5px;}
.cboxIframe{width:100%;height:100%;display:block;border:0;padding:0;margin:0}
#colorbox,#cboxContent,#cboxLoadedContent{box-sizing:content-box;-moz-box-sizing:content-box;-webkit-box-sizing:content-box}
#cboxOverlay{background:#000}
#colorbox{outline:0}
#cboxContent{margin-top:20px;background:#000}
.cboxIframe{background:#fff}
#cboxError{padding:50px;border:1px solid #ccc}
#cboxLoadedContent{border:5px solid #000;background:#fff}
#cboxTitle{position:absolute;top:-20px;left:0;color:#ccc;visibility:hidden}
#cboxCurrent{position:absolute;top:-20px;right:0;color:#ccc}
#cboxLoadingGraphic{background:url(http://www.jacklmoore.com/colorbox/example3/images/loading.gif) no-repeat center center}
#cboxPrevious,#cboxNext,#cboxSlideshow,#cboxClose{border:0;padding:0;margin:0;overflow:visible;width:auto;background:0}
#cboxPrevious:active,#cboxNext:active,#cboxSlideshow:active,#cboxClose:active{outline:0}
#cboxSlideshow{position:absolute;top:-20px;right:90px;color:#fff}
#cboxPrevious{position:absolute;top:50%;left:5px;margin-top:-32px;background:url(http://www.jacklmoore.com/colorbox/example3/images/controls.png)no-repeat top left;width:28px;height:65px;text-indent:-9999px}
#cboxPrevious:hover{background-position:bottom left}
#cboxNext{position:absolute;top:50%;right:5px;margin-top:-32px;background:url(http://www.jacklmoore.com/colorbox/example3/images/controls.png) no-repeat top...