Content overly
Written by 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 https://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='https://www.htmlbestcodes.com' style='font-size: 8pt; text-decoration: none'>Html Best Codes</a>
Example:
Let's stay in touch
Get the latest and greatest javascript codes directly to your mail
TRENDING POST
VISITORS
Online Users:
12
Recent Members:
TheDewalt, sahjahan, fk khan, Proper, Jenisha
Comments
Here you can leave us commments. Let us know what you think about this code tutorial!