Overlay Banner

What you will be learning.

Today you will be learning about a overlay banner. Now you may be thinking what is an overlay banner? Well an overlay banner is a banner that will appear and hover over content when you hover over a certain spot. Now you may be asking what good is this to me? Well it is a great way to sneak advertising into your site!

Example

Code Required

HTML Markup

        <div class="banner"> <a href="#">Don't Hover Over This!</a> </div>

CSS Markup

.banner a:hover, .banner-hover {
	background-position: 0 -30px;
}
.banner {
	height: 80px;
}
.banner a {
	position: absolute;
	width: 100%;
	height: 30px;
	color: white;
	text-decoration: none;
	font-size: 24px;
	font-family: "Open Sans", sans-serif;
}
#overlay {
	position: absolute;
	width: 100%;
	height: 100px;
	background-color: #75FCFF;
	display: none;
	text-align: center;
	bottom: -21px;
}

Javascript Markup 

      $(document).ready(function(){
	$(' <div class=content1> </div>')	 //select div
	.attr('id','overlay') // add id of overlay
	.css('opacity', 0.85)// set css opcaity of .65
	.hover(function(){ //hover function
	$(this).addClass('active');
	}, function(){
		$(this).removeClass('active');
	setTimeout(function(){ //execute a functio, once, after waiting specidied number of milliseconds
	$('#overlay:not(.active)').slideUp(function(){ //when not activated slide up
		$('a.banner-hover').removeClass('banner-hover'); // removes class
	});
	},300); //sets time
	}).appendTo('body'); //append to body

$('.banner a ').mouseover(function(){ //adds mouse over event to the banner a tag
	$(this).addClass('banner-hover');
	$('#overlay:not(:animated)')
	.addClass('active')
	.html('<h2> I thought I Told You Not To Hover Over This Button!</h2>')
    .slideDown();
    });
    });

Back