Nav Pull Up

by Apple Ilagan

HTML

<div id="ctahome"><div class="clearfix">
    <div class="ctacontent"><div class="allme">
    <div class="cta"><a href="">search for homes</a></div>
    <div class="ctatext">
   	Find your dream home.<br />
	Find information on the schools.<br />
	What's on the market in your area?
    </div>
    </div></div>
   <div class="ctacontent ctapad"><div class="allme">
    <div class="cta"><a href="">search for homes</a></div>
    <div class="ctatext">
   	How much do you qualify for?<br />
	What's your payment?<br />
	What rates can we offer you? 
    </div>
    </div></div>
    <div class="ctacontent"><div class="allme">
    <div class="cta"><a href="">search for homes</a></div>
    <div class="ctatext">
      What's trending on our social media?
    </div>
    </div></div>
   
    <!--ctahome--></div>

CSS

#ctahome {width:1067px; margin:0 auto; position:relative; padding-top:300px; clear:both;}
.cta{width:340px; height:40px; background:#aaa;
text-transform:uppercase; text-align:center; padding-top:20px; font-size:20px; line-height:22px;
position:relative; z-index:9;}
.cta a {display:block; color:#fff;}
.ctapad {margin:0 22px;}
.ctacontent {width:340px; float:left; position:relative;}
.ctatext {width:280px; height:200px; position:absolute; margin-top:-240px; text-align:center; line-height:15px; color:#fff;
background:#000; display:none; padding:20px 30px 0 30px; font-size:12px;}
.ctatext img{max-width:100%; height:auto; margin-bottom:5px; line-height:20px;}
.allme {position:relative;}

JavaScript

jQuery(function () {
	$('.allme')
    .mouseenter(function() {
		jQuery(this).css("zIndex","999999");
	   var index = $(this).parent().index(),
		newTarget = jQuery('.ctatext').eq(index);
		jQuery('.ctatext').not(newTarget).fadeOut('fast')
        newTarget.delay('.ctatext').fadeIn('fast')	
    })
    .mouseleave(function() {
		jQuery(this).css("zIndex","9");
        jQuery('.ctatext').fadeOut('fast');	
    });
});