Content overly

Written by @kerixa 25 February 2014

A useful script for many websites to show an overlay box on the images and have some links and contents on this layer. It is good for websites to show some details on the pictures of products and show information, efficiently.

Code Snippet:

                                                
                                                <!-- this script is provided by www.htmlbestcodes.com coded by: Kerixa Inc. -->
<!-- this script got from www.htmlbestcodes.com-Coded by: Krishna Eydat -->
<html>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>

<script type="text/javascript">
jQuery.noConflict();

jQuery.extend(jQuery.easing, {easeOutExpo:function (x, t, b, c, d) { //see: http://gsgd.co.uk/sandbox/jquery/easing/
		return (t==d) ? b+c : c * (-Math.pow(2, -10 * t/d) + 1) + b;
	}
});

(function($){
  $.fn.overlaycontent=function(options) {  
    var setting={id:'', dir:'up', speed:200, opacity:1}
    return this.each(function(){
      $.extend(setting, options, (this.getAttribute('data-overlayid'))? {id:this.getAttribute('data-overlayid')} : {})
			var $target=$(this).css({position:'relative', overflow:'hidden'}) //set anchor DIV position to relative
			var $overlay=$('#'+(setting.id)) //reference overlay DIV box
			var startpoint={}
			if (setting.dir=="up" || setting.dir=="down"){ //set initial position of overlay box (either "top" or "left" property affected)
				startpoint={top:$target.outerHeight()* (setting.dir=="down"? -1 : 1)}
			}
			else{
				startpoint={left:$target.outerWidth()* (setting.dir=="right"? -1 : 1)}
			}
			var overlaydimenions={w:$target.outerWidth()-($overlay.outerWidth()-$overlay.width()), h:$target.outerHeight()-($overlay.outerHeight()-$overlay.height())}
			$overlay.css($.extend({position:'absolute', zIndex:'1000', width:overlaydimenions.w, height:overlaydimenions.h, left:0, top:0, visibility:'visible'}, startpoint)).appendTo($target)
			if (setting.opacity<1)
				$overlay.css({opacity:setting.opacity})
			$target.hover(
				function(){
					$overlay.dequeue().animate((setting.dir=="up" || setting.dir=="down")? {top:0} : {left:0}, setting.speed, 'easeOutExpo')
				},
				function(){
					$overlay.dequeue().animate(startpoint, setting.speed)
				}
			) //end hover
  	})
  }
})(jQuery);
</script>

<script>
jQuery(function($){ //on document.ready
	$('#info').overlaycontent({ //initialize overlay on single DIV with id="info"
		speed:500, //duration of animation in milliseconds
		dir:'up' //supports 'up', 'down', 'left', or 'right'
	})

	$('div.imagecontainers').overlaycontent({ //initialize overlay on DIVs with class="imagecontainers"
		speed:300,
		dir:'right',
		opacity:0.8 //opacity: 0 to 1
	})
})
</script>

<style type="text/css">
div#summerinfo{
background:white;
padding:5px;
}
</style>
</head>
<body>
<div class="imagecontainers" data-overlayid="summerinfo" style="display:block-inline;width:200px;height:150px">
<img src="http://www.htmlbestcodes.com/images/summery.jpg">
</div>

<div id="summerinfo">
<a href="http://www.htmlbestcodes.com">Useful Scripts</a><br />
<a href="http://www.htmlbestcodes.com">Beautiful and well designed</a><br />
<a href="http://www.htmlbestcodes.com">Latest technologies</a><br />
<a href="http://www.htmlbestcodes.com">www.htnmlbestcodes.com</a><br />
</div>
<br/>
<div style="clear:both"></div><div><a target="_blank" href="http://www.htmlbestcodes.com/"><span style="font-size: 8pt; text-decoration: none">HTML Best Codes</span></a></div>
</body>
</html><a target='_blank' href='www.htmlbestcodes.com' style='font-size: 8pt; text-decoration: none'>Html Best Codes</a>                                                
                                            

Example:


About @kerixa

I am Krishna Eydat. I studied Software Engineering at University of Waterloo in Canada. I lead a few tech companies. I am passionate about the way we are connected. I would like to be part of something big or be the big deal!

K
TRENDING POST
1
2
3
4
5
VISITORS
Online Users: 12
Recent Members: Nikhil 999+, bishalthakur
advertisement 2