Develop Reference

div is pushed by another div when toggled

I am having somewhat two navigation bars right here. When I click on the menu-btn, the sidebar will slide in. But somehow the sidebar pushes the menu-bar downwards which I do not understand why. How do I make the sidebar stop pushing the menu-bar. Any tips will be appreciated.
function main(){
$(".menu-bar").hide();
$(".menu-bar").fadeIn(300);
$(".sidebar").hide();
$(".dropdown-content").hide();
$(".menu-btn").on('click',function(){
$(".sidebar").animate({width:'toggle'});
});
$(".close-btn").on('click',function(){
$(".sidebar").animate({width:'toggle'});
});
$(".login").on('click',function(){
$(".dropdown-content").animate({width:'toggle'});
});
}
$(document).ready(main)
.sidebar{
display:none;
width:250px;
background-color:#005777;
z-index:1;
padding-top:60px;
height:100%;
overflow:hidden;
}
.brand{
font-family:ParmaPetit;
font-size:50px;
}
.sidebar a, .login{
text-decoration:none;
padding: 8px 8px 8px 8px;
display:block;
font-size:30px;
text-align:center;
color:white;
}
.close-btn{
position:relative;
font-size:40px;
float:right;
bottom:50px;
right:10px;
color:white;
}
.sidebar a:hover, .login:hover, .close-btn:hover, .menu-btn:hover{
color:#01af55;
cursor:pointer;
transition:0.3s;
}
.dropdown-content{
background-color:#111111;
position:relative;
left:250px;
bottom:29px;
}
.menu-bar{
background-color:#005777;
padding-bottom:10px;
overflow:hidden;
float:top;
}
.menu-btn{
font-size:40px;
cursor:pointer;
color:white;
position:relative;
left:20px;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="sidebar" id="sidebar">
<span class="close-btn">×</span>
Airline Intel
Book Flight
Book Hotel
<div class="dropdown">
<span class="login">Sign In ➤</span>
<div class="dropdown-content">
Admin
User
Register
</div>
</div>
</div>
<div class="menu-bar" id="collapse">
<span class="menu-btn">☰</span>
</div>

function main(){
$(".menu-bar").hide();
$(".menu-bar").fadeIn(300);
$(".sidebar").hide();
$(".dropdown-content").hide();
$(".menu-btn").on('click',function(){
$('#collapse').hide();
$(".sidebar").animate({width:'toggle'});
});
$(".close-btn").on('click',function(){
$('#collapse').show();
$(".sidebar").animate({width:'toggle'});
});
$(".login").on('click',function(){
$(".dropdown-content").animate({width:'toggle'});
});
}
$(document).ready(main)
.sidebar{
display:none;
width:250px;
background-color:#005777;
z-index:1;
padding-top:60px;
height:100%;
overflow:hidden;
}
.brand{
font-family:ParmaPetit;
font-size:50px;
}
.sidebar a, .login{
text-decoration:none;
padding: 8px 8px 8px 8px;
display:block;
font-size:30px;
text-align:center;
color:white;
}
.close-btn{
position:relative;
font-size:40px;
float:right;
bottom:50px;
right:10px;
color:white;
}
.sidebar a:hover, .login:hover, .close-btn:hover, .menu-btn:hover{
color:#01af55;
cursor:pointer;
transition:0.3s;
}
.dropdown-content{
background-color:#111111;
position:relative;
left:250px;
bottom:29px;
}
.menu-bar{
background-color:#005777;
padding-bottom:10px;
overflow:hidden;
float:top;
}
.menu-btn{
font-size:40px;
cursor:pointer;
color:white;
position:relative;
left:20px;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="sidebar" id="sidebar">
<span class="close-btn">×</span>
Airline Intel
Book Flight
Book Hotel
<div class="dropdown">
<span class="login">Sign In ➤</span>
<div class="dropdown-content">
Admin
User
Register
</div>
</div>
</div>
<div class="menu-bar" id="collapse">
<span class="menu-btn">☰</span>
</div>
you need to hide menu button when you clicked it. and show when you click in close button.

Add a position : absolute; to the sidebar class should do the trick

Trying to understand the CSS controlling a section of a website [closed]

Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 7 years ago.
Improve this question
So i've forked a section on another website and I've looked through all the CSS and js and tried to recreate it on my website. I've been at it for an hour and i still can't figure out what's missing.
My question is what is the easiest way to find out what CSS is controlling a certain section?
Also what is missing from the CSS in my fiddle which is the reason my version of the html looks different to the one on the website mentioned above (you will have to scroll down on the website mentioned above to reach the section i'm trying to recreate).
Here is my fiddle of where I'm at https://jsfiddle.net/hLkyLqyd/
CSS:
.grab-section{
background-color:#fff;
width:100%;
overflow:hidden;
position:relative;
}
.grab-section .holder{
width:1104px;
margin:0 auto;
overflow:hidden;
padding:83px 0 123px;
}
.grab-section h2{
text-align:center;
font-size:58px;
line-height:70px;
margin:0 0 19px;
color:#2b3e51;
}
.grab-section .intro{
display:block;
font-weight:normal;
color:#bdc3c7;
text-align:center;
margin:0 0 67px;
}
.license-list{
margin:0 0 41px;
overflow:hidden;
text-align:center;
list-style: none;
}
.license-list li{
float:left;
width:50%;
}
.license-list span{
display:block;
padding:16px 10px 18px;
background:#ecf0f1;
border-radius:0 5px 5px 0;
color:#9fa6ac;
font-size:18px;
line-height:24px;
-webkit-transition:0.3s;
-moz-transition:0.3s;
-ms-transition:0.3s;
-o-transition:0.3s;
transition:0.3s;
}
.license-list span:hover{
text-decoration:none;
cursor:pointer;
background:#f9f9f9;
}
.license-list li:first-child span{border-radius:5px 0 0 5px;}
.license-list strong{
display:block;
font-size:24px;
line-height:28px;
margin:0 0 4px;
color:#2c3e50;
font-weight:600;
-webkit-transition:0.3s;
-moz-transition:0.3s;
-ms-transition:0.3s;
-o-transition:0.3s;
transition:0.3s;
}
.license-list .active span{
box-shadow:inset 0 2px 0 0 rgba(0,0,0,0.2);
background:#1abc9c;
color:#dff3ed;
cursor:default;
}
.license-list .active span strong{color:#fff;}
.grab-section .boxes{
width:100%;
overflow:hidden;
text-align:center;
color:#bdc3c7;
}
.grab-section .box{
width:312px;
position:relative;
padding:26px 17px 39px 18px;
border:3px solid #ebedee;
border-radius:5px;
float:left;
margin:0 0 0 22px;
}
.grab-section .box.bndl:before{
position:absolute;
right:-5px;
top:20px;
content:'';
background:url(../images/sprite.png) no-repeat -180px 0;
width:65px;
height:41px;
}
.grab-section .boxes .box:first-child{margin:0;}
.grab-section .box h3{
font-size:22px;
line-height:28px;
color:#2c3e50;
margin:0 0 8px;
opacity:0.95;
}
.grab-section .box .title{
display:block;
font-weight:normal;
font-size:18px;
line-height:24px;
color:#bdc3c9;
padding:0 0 27px;
margin:0 0 20px;
border-bottom:2px solid #ecf0f1;
}
.grab-section .box .list{margin:0 0 29px;}
.grab-section .box .list strong{color:#7f8c8d;}
.grab-section .box .btn{
display:inline-block;
vertical-align:top;
width:190px;
color:#fff;
font-size:17px;
line-height:21px;
font-weight:bold;
background:#1abc9c;
border-radius:3px;
padding:11px 0 12px 0;
font-weight:500;
border-bottom: 2px solid #16a085;
}
.grab-section .box .btn:hover {
text-decoration:none;
opacity:0.8
}
.grab-section .box .btn:active {
opacity:1;
}
.grab-section .holder {
margin:0 2% !important;
}
.grab-section .intro,
.license-list{
padding:0 !important;
margin:0 !important;
}
#media screen and (max-width: 1108px){
.grab-section .intro,
.license-list{
padding:0 !important;
margin:0 !important;
}
.grab-section .holder {
margin:0 2% !important;
}
.grab-section .box{
width: 27%;
padding: 26px 1.7% 32px;
margin: 0 0 0 3%;
}
.grab-section .box .title{
padding:0 0 10px;
margin:0 0 10px;
opacity:0.9;
}
.grab-section .box.bndl:before { background:none;}
.grab-section .box .list {font-size:16px;}
.grab-section .box .list{margin:0 0 10px;}
}
#media screen and (max-width: 768px){
.grab-section .intro,
.license-list
{margin:0 0 15px;}
.grab-section .box{
float:none;
display:block;
overflow:hidden;
width:auto;
margin:0 0 30px !important;
}
.grab-section .box .title{
font-size:14px;
line-height:16px;
opacity:0.9;
}
.grab-section .box.bndl:before{top:-8px;}
.grab-section .box .bndl { display:none}
}
HTML:
<script type='text/javascript' src='http://designmodo.com/wp-includes/js/jquery/jquery.js?ver=1.11.3'></script>
<section class="grab-section" id="buy">
<div class="holder">
<h2>Ready to grab this Sweety?</h2>
<strong class="intro">These are probably the best prices ever offered.</strong>
<ul class="license-list">
<li class="active">
<span class="per-lic">
<strong>Personal License</strong>
For Personal Projects (from $39)
</span>
</li>
<li>
<span class="dev-lic">
<strong>Developers License</strong>
For Business Projects (from $149)
</span>
</li>
</ul>
<div class="boxes developer hidden">
<div class="box">
<h3>Flat UI PSD</h3>
<strong class="title">For Designers</strong>
<ul class="list">
<li><strong>Photoshop 5.5+</strong> PSD File</li>
<li><strong>Organized</strong> Layers and Folders</li>
<li><strong>Vector-Based</strong> Graphics</li>
<li><strong>Documentation</strong></li>
<li><strong>Free Fonts</strong></li>
</ul>
Buy for $149
</div>
<div class="box bndl">
<h3>Flat UI PSD & HTML</h3>
<strong class="title">For Professional Front-Enders</strong>
<ul class="list">
<li>Features from <strong>PSD&HTML</strong></li>
<li><strong>Smart Way</strong> to Use Kit</li>
<li><strong>Low Price</strong> Deal</li>
<li><strong>Documentation</strong></li>
<li><strong>Free Fonts</strong></li>
</ul>
Buy for $249
</div>
<div class="box">
<h3>Flat UI HTML</h3>
<strong class="title">For Coders</strong>
<ul class="list">
<li><strong>Bootstrap-Based</strong> Layout</li>
<li><strong>Retina Ready</strong> Icons & Graphics</li>
<li><strong>Responsive</strong> Layout</li>
<li><strong>Documentation</strong></li>
<li><strong>Free Fonts</strong></li>
</ul>
Buy for $149
</div>
</div>
<div class="boxes personal">
<div class="box">
<h3>Flat UI PSD</h3>
<strong class="title">For Designers</strong>
<ul class="list">
<li><strong>Photoshop 5.5+</strong> PSD File</li>
<li><strong>Organized</strong> Layers and Folders</li>
<li><strong>Vector Based</strong> Graphics</li>
<li><strong>Documentation</strong></li>
<li><strong>Free Fonts</strong></li>
</ul>
Buy for $39
</div>
<div class="box bndl">
<h3>Flat UI PSD & HTML</h3>
<strong class="title">For Professional Front-Enders</strong>
<ul class="list">
<li>Features from <strong>PSD&HTML</strong></li>
<li><strong>Smart Way</strong> to Use Kit</li>
<li><strong>Low Price</strong> Deal</li>
<li><strong>Documentation</strong></li>
<li><strong>Free Fonts</strong></li>
</ul>
Buy for $69
</div>
<div class="box">
<h3>Flat UI HTML</h3>
<strong class="title">For Coders</strong>
<ul class="list">
<li><strong>Bootstrap-Based</strong> Layout</li>
<li><strong>Retina Ready</strong> Icons & Graphics</li>
<li><strong>Responsive</strong> Layout</li>
<li><strong>Documentation</strong></li>
<li><strong>Free Fonts</strong></li>
</ul>
Buy for $39
</div>
</div>
</div>
</section>
<script type="text/javascript">
jQuery('.license-list li span').click(function(){
if (jQuery(this).parent().attr('class') != 'active'){
jQuery('.license-list li.active').removeClass('active');
jQuery(this).parent().addClass('active');
jQuery('.boxes.developer').slideToggle(300);
jQuery('.boxes.personal').slideToggle(300);
jQuery('.boxes.personal').before( jQuery('.boxes.developer') );
}
});
</script>
help will be appreciated
Thanks in advance

Try using the devtools of a browser such as Chrome to select the element. There should be a pane, usually on the right side, that shows you the CSS rules applied.

just right-click on the element you want to know the css or js controlling it and select Inspect Element.
FIRST EDIT
Alternatively, saving a page locally downloads all the css and js used by the page. Then, you can just copy the css styles from the downloaded folder.

How can i make these tabs Responsive

When I open the site on a mobile then last tab merge with others tabs, and last tab will have a linebreak.
But I am not expert in media Query in CSS3. How do I apply this code, if there is some other way then mine give your best solution regarding my issue.
I don't want to use Bootstrap because my website consists of custom designing in html and css.
document.getElementById('content_4').style.display = 'none';
function tabSwitch(new_tab, new_content) {
document.getElementById('content_1').style.display = 'none';
document.getElementById('content_2').style.display = 'none';
document.getElementById('content_3').style.display = 'none';
document.getElementById('content_4').style.display = 'none';
document.getElementById(new_content).style.display = 'block';
document.getElementById('tab_1').className = '';
document.getElementById('tab_2').className = '';
document.getElementById('tab_3').className = '';
document.getElementById('tab_4').className = '';
document.getElementById(new_tab).className = 'activy';
}
function tabSwitch_2(activy, number, tab_prefix, content_prefix) {
for (var i=1; i < number+1; i++) {
document.getElementById(content_prefix+i).style.display = 'none';
document.getElementById(tab_prefix+i).className = '';
}
document.getElementById(content_prefix+activy).style.display = 'block';
document.getElementById(tab_prefix+activy).className = 'activy';
}
#tabbed_box {
margin: 0px auto 0px auto;
width:300px;
}
.tabbed_box h4 {
font-family:Arial, Helvetica, sans-serif;
font-size:23px;
color:#ffffff;
letter-spacing:-1px;
margin-bottom:10px;
}
.tabbed_box h4 small {
color:#e3e9ec;
font-weight:normal;
font-size:9px;
font-family:Verdana, Arial, Helvetica, sans-serif;
text-transform:uppercase;
position:relative;
top:-4px;
left:6px;
letter-spacing:0px;
}
ul.tabs {
margin:0px; padding:0px;
text-align: center;
}
ul.tabs li {
list-style:none;
display:inline;
}
ul.tabs li a {
background-color:#F7F7F7;
color:black;
padding:8px 14px 8px 14px;
text-decoration:none;
font-size:13px;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-weight:bold;
text-transform:uppercase;
border:1px solid #F4FBFF;
border-radius: 2px;
-webkit-box-shadow: 1px 1px 1px 2px #ccc; /* Safari 3-4, iOS 4.0.2 - 4.2, Android 2.3+ */
-moz-box-shadow: 1px 1px 2px 1px #ccc; /* Firefox 3.5 - 3.6 */
box-shadow: 1px 1px 2px 1px #ccc; /* Opera 10.5, IE 9, Firefox 4+, Chrome 6+, iOS 5 */
}
ul.tabs li a:hover {
background-color:#3498DB;
color:#fff;
border-color:#3498DB;
-webkit-box-shadow: 0 8px 6px -6px black;
-moz-box-shadow: 0 8px 6px -6px black;
box-shadow: 0 8px 6px -6px black;
}
ul.tabs li a.activy {
background-color:#3498DB;
color:#fff;
border:1px solid #3498DB;
}
.content {
background-color:#fff;
padding:10px;
}
#content_2, #content_3 { display:none; }
ul.tabs {
margin:0px; padding:0px;
margin-top:5px;
margin-bottom:6px;
}
.content ul {
margin:0px;
padding:0px 20px 0px 20px;
}
.content ul li {
list-style:none;
padding-top:15px;
padding-bottom:15px;
font-size:13px;
}
.content ul li a {
text-decoration:none;
color:#3e4346;
}
.content ul li a small {
color:#8b959c;
font-size:9px;
text-transform:uppercase;
font-family:Verdana, Arial, Helvetica, sans-serif;
position:relative;
left:4px;
top:0px;
}
.content ul li:last-child {
border-bottom:none;
}
ul.tabs li a {
background-image:url(images/tab_off.jpg);
background-repeat:repeat-x;
background-position:bottom;
}
<div id="tabbed_box_1" class="tabbed_box">
<div class="tabbed_area">
<br>
<ul class="tabs">
<li>Text</li>
<li>Email</li>
<li>Facebook</li>
<li>Social Media</li>
</ul>
<div id="content_1" class="content">
<img src="http://www.reputationbeast.com/wp-content/uploads/2015/05/Image-0011.png"/ style="float:left; width:320px; height:250px; ">
<p style="float:left; text-align:center; font-style:italic; padding-top:80px; padding-left:30px; font-size:20px;"><b>"Nothing delivers<br/> your message <br/> like a text message."</b></p>
</div>
<div id="content_2" class="content greybg">
<img src="http://www.reputationbeast.com/wp-content/uploads/2015/05/Image-002.png"/ style="float:left; margin-right:30px; width:250px; height:180px; margin-top:30px; margin-bottom:40px;">
<p style="float:left; text-align:center; font-style:italic;">
<p style="margin-left:20px; font-size:20px; font-weight:bold;color:#2072bf; margin-top:30px;"><i>How effective is email?</i></p>
<p style="font-style:italic;font-weight:bold;">Spam filters and an overwhelmed inbox means only 1 out of 5 emails are opened. And, of those only 1 out of 7 generates a response. </p>
</p>
</div>
<div id="content_3" class="content">
<img src="http://www.reputationbeast.com/wp-content/uploads/2015/05/Image-003.png"/ style="float:left; margin-right:30px; width:260px; height:220px; margin-bottom:30px;">
<p style="float:left; text-align:center; font-style:italic; padding-left:5px;">
<p style="margin-left:20px; font-size:20px; font-weight:bold;color:#2072bf; margin-top:30px;" ><i>How about Facebook?</i></p>
<p style="margin-left:20px;font-style:italic;font-weight:bold;">Facebook lost its immediacy years ago. Organic reach has dropped to less than 2% which means you have to pay-to-play to reach more fans and at Facebook's pace.</p>
</p>
</div>
<div id="content_4" class="content">
<img src="http://www.reputationbeast.com/wp-content/uploads/2015/05/Image-004.png"/ style="float:left; margin-right:70px;width:220px; height:180px; margin-top:30px; margin-bottom:40px;">
<p style="float:left; text-align:center; font-style:italic; padding-left:8px;">
<p style="margin-left:20px; font-size:20px; font-weight:bold;color:#2072bf; margin-top:30px;" ><i>...and other Social Media?</i></p>
<p style="margin-left:20px;font-style:italic;font-weight:bold;">Twitter, Google+, Instagram, Pinterest, and every other Social Media site controls access to your fans, most offer a pay option. The best option - your own Text lists.</p>
</p>
</div>
</div>
</div>

Add display: inline-block; for ul.tabs li a this will help
See fiddle : http://jsfiddle.net/sachinkk/1b2m3rsq/

How to make a rollover div clickable?

I have a rollover with text div that I'd like to make clickable/linkable. I'd like to whole div to be clickable not just the headings. But I'm unsure how to do so whether it's in my html or css or if I should add a script? Here's what I have:
<div class="box one">
<img src="http://www.mydogbreeders.com/wp-content/themes/dogBreedersResponsive2014/images/dogs/beagle.jpg" alt="Lost" data-over="images/placeholder-image-hover.png" data-out="images/placeholder-image-hover.png">
<div class="description">
<div class="description-inner">
<h3> heading </h3>
<h4> subheading</h4>
</div><!--description-inner-->
</div><!--description-->
</div> <!--box one-->
.box{
margin:0 20px 20px 0;
float: left;
position:relative;
}
.description {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
background:#deefed;
color:#F00;
width:460px;
height:300px;
visibility:hidden;
opacity:0;
display:table;
}
.description-inner {
display:table-cell;
vertical-align:middle;
}
.description h3{
font-size:1.25em;
color:#00a8cf;
font-weight:bold;
font-style:italic;
text-transform:uppercase;
padding:20px 0 0 0;
margin:auto;
text-align:center;
width:90%;
top:50%;
border-top:1px #F00 solid;
}
.description h4 {
color:#00a8cf;
font-style:italic;
font-weight:normal;
padding:0 0 20px 0;
margin:auto;
text-align:center;
width:90%;
border-bottom:1px #F00 solid;
}
.box:hover .description {
visibility: visible;
opacity: 1;
}
And here's the demo: http://jsfiddle.net/L9bat8hj/

Move end a-tag behind the rollover element.
<div class="box one">
<a href="lost.html">
<img src="http://www.mydogbreeders.com/wp-content/themes/dogBreedersResponsive2014/images/dogs/beagle.jpg" alt="Lost" data-over="images/placeholder-image-hover.png" data-out="images/placeholder-image-hover.png">
<div class="description">
<div class="description-inner">
<h3> heading </h3>
<h4> subheading</h4>
</div><!--description-inner-->
</div><!--description-->
</a>
</div> <!--box one-->
http://jsfiddle.net/L9bat8hj/1/

Help in jQuery animation

What I want to do something like this bad example, I tried by CSS3 but field to change the picture, at least I made everything in jQuery, but no animation or something wrong, actually I don't know, here is my Attempt BY CSS3.
Here is my code
#maged{
width:198px; /*140px * 5*/
height:591px;
background-color:#0C9;
position: absolute;
overflow:hidden;
top: 14px;
left: 41px;
position: relative;
overflow: hidden;
-webkit-transition: all 0.5s ease-out;
-moz-transition: all 0.5s ease-out;
transition: all 0.5s ease-out;
opacity:1;
filter:alpha(opacity=100);
}
#maged:hover {
opacity:0;
filter:alpha(opacity=0);
-moz-transform: scale(1.00) rotate(0deg) translate(0px, 100px) skew(0deg, 0deg);
-webkit-transform: scale(1.00) rotate(0deg) translate(0px, 100px) skew(0deg, 0deg);
transform: scale(1.00) rotate(0deg) translate(0px, 100px) skew(0deg, 0deg); transform-origin: 0% 0%
background-color:#36F;
}
#cc_item img{
position:absolute;
width:195px;
height:591px;
top:-562px;
left:54px;
}
#cc_title{
color:#fff;
line-height:46px;
font-size:30px;
top:472px;
left:59px;
position:absolute;
background:#272727;
width:167px;
display:block;
z-index:11;
}
-->
</style>
<script type="text/javascript">
$(function(evt) {
$("#maged").click(function() {
alert("loool");
$("#cc_item").slideDown("slow");
$("#cc_title").fadeIn("slow");
return false;
});
});
</script>
</head>
<body>
<div id="maged"></div>
<div id="cc_title">Main page</div>
<div id="cc_item" style="z-index:5;">
<img src="img30000.jpg" alt="" />
</div>
</body>
</html>

This solution is very CSS heavy, as I wanted to focus on making the HTML cleaner and making sure the general effect worked (though to a lesser degree) when JavaScript is off.
To my knowledge, there's no CSS3 per se, though the CSS may seem advanced. (it's not!)
The most important point for me what that those images really aren't content so I don't think you need to use <img> elements for them; instead use CSS background images... but to animate those background images easily I did have to use a jQuery plugin.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>javascript - Help in jQuery animation</title>
<style type="text/css">
<!--
body {
background:url(http://osc4.template-help.com/wt_32608/images/bg.gif);
text-align:center;
}
ul#menu {
background:#171717;
margin:auto;
overflow:hidden;
width:985px;
list-style:none;
padding:0px;
}
ul#menu li {
list-style:none;
background:transparent;
float:left;
text-align:center;
width:195px;
height:591px;
padding:0px;
position:relative;
border:1px solid #FFFFFF;
}
ul#menu li a {
text-decoration:none;
color:#FFFFFF;
display:block;
background:transparent;
height:591px;
width:195px;
position:relative;
}
ul#menu li a .menu-text {
background:#272727;
width:167px;
font-size:30px;
font-family:Arial,Helvetica,sans-serif;
font-variant:small-caps;
position:absolute;
top:224px;
left:14px;
}
ul#menu li a .menu-text .title {
line-height:46px;
}
ul#menu li a .description {
display:none;
font-size:smaller;
text-align:left;
line-height:auto;
}
ul#menu li a:hover .menu-text {
top:auto;
width:195px;
height:152px;
left:0px;
bottom:0px;
}
body.javascript-enabled ul#menu li a:hover .menu-text {
top:224px;
bottom:auto;
width:167px;
height:auto;
left:14px;
}
ul#menu li a:hover .description {
display:block;
padding-left:30px;
}
body.javascript-enabled ul#menu li a:hover .description {
display:none;
}
ul#menu #main-page a {
background:url(http://osc4.template-help.com/wt_32608/images/img1.jpg) NO-REPEAT;
background-position:-1000px -1000px;
}
ul#menu #about-us a {
background:url(http://osc4.template-help.com/wt_32608/images/img2.jpg) NO-REPEAT;
background-position:-1000px -1000px;
}
ul#menu #services a {
background:url(http://osc4.template-help.com/wt_32608/images/img3.jpg) NO-REPEAT;
background-position:-1000px -1000px;
}
ul#menu #partners a {
background:url(http://osc4.template-help.com/wt_32608/images/img4.jpg) NO-REPEAT;
background-position:-1000px -1000px;
}
ul#menu #locations a {
background:url(http://osc4.template-help.com/wt_32608/images/img5.jpg) NO-REPEAT;
background-position:-1000px -1000px;
}
ul#menu #main-page a:hover {
background-position:top center;
}
ul#menu #about-us a:hover {
background-position:top center;
}
ul#menu #services a:hover {
background-position:top center;
}
ul#menu #partners a:hover {
background-position:top center;
}
ul#menu #locations a:hover {
background-position:top center;
}
body.javascript-enabled ul#menu #main-page a:hover {
background-position:center -1000px;
}
body.javascript-enabled ul#menu #about-us a:hover {
background-position:center -1000px;
}
body.javascript-enabled ul#menu #services a:hover {
background-position:center -1000px;
}
body.javascript-enabled ul#menu #partners a:hover {
background-position:center -1000px;
}
body.javascript-enabled ul#menu #locations a:hover {
background-position:center -1000px;
}
-->
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.0/jquery.min.js" type="text/javascript"></script>
<script src="http://plugins.jquery.com/files/jquery.backgroundPosition.js_7.txt" type="text/javascript"></script>
<script type="text/javascript">
//<![CDATA[
$(document).ready(function() {
$("body").addClass("javascript-enabled");
$("ul#menu li a")
.css({backgroundPosition: '0px -591px'})
.mouseenter(function() {
$(this).find(".menu-text").hide();
$(this)
.stop().animate({backgroundPosition: '0px 0px'}, 500, function() {
$(this).css({backgroundPosition: '0px 0px'});
$(this).find(".description").css({display:'block'});
$(this).find(".menu-text").css({top:'auto',width:'195px',height:'152px',left:'0px',bottom:'0px'}).fadeIn('slow');
});
})
.mouseleave(function() {
$(this).find(".menu-text").hide();
$(this)
.stop().animate({backgroundPosition: '0px -591px'}, 250, function() {
$(this).css({backgroundPosition: '0px -591px'});
$(this).find(".description").css({display:''});
$(this).find(".menu-text").css({top:'',width:'',height:'',left:'',bottom:''}).fadeIn('slow');
});
})
});
//]]>
</script>
</head>
<body>
<ul id="menu">
<li id="main-page">
<span class="menu-text"><span class="title">Main page</span> <span class="description">Welcome to our site</span></span>
</li>
<li id="about-us">
<span class="menu-text"><span class="title">About us</span> <span class="description">Who we are</span></span>
</li>
<li id="services">
<span class="menu-text"><span class="title">Services</span> <span class="description">& solutions</span></span>
</li>
<li id="partners">
<span class="menu-text"><span class="title">Partners</span> <span class="description">Partners list</span></span>
</li>
<li id="locations">
<span class="menu-text"><span class="title">Locations</span> <span class="description">Our contacts</span></span>
</li>
</ul>
</body>
</html>

Heres my solution to your problem without using css3. It´s all in the 1.html file, jquery and images are poiting to external sources, so you can just run it. Hope this can help you :)
<html>
<head>
<style>
#container{
overflow: hidden;
width: 800px;
height: 600px;
border: 1px solid black;
cursor: pointer;
}
.maged{
width:200px;
height:600px;
float:left;
display: none;
}
.cc_item{
text-align:center;
width:200px;
height:600px;
background:#171717;
float:left;
}
span.cc_title{
color:#fff;
line-height:46px;
font-size:30px;
margin: 250px 10px 0px;
float: left;
background:#272727;
width:180px;
z-index:11;
}
</style>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
<script type="text/javascript">
$(function(evt) {
$(".cc_item").hover(function() {
$(this).find(".maged").stop(true,true).slideDown(300);
$(this).find(".cc_title").fadeOut("slow");
},function(){
$(this).find(".maged").stop(true,true).slideUp(300);
$(this).find(".cc_title").fadeIn("slow");
});
});
</script>
</head>
<body>
<div id="container">
<div class="cc_item" style="z-index:5;">
<div class="maged">
<img src="http://www.hintmag.com/blog/uploaded_images/richardnicoll08-711189.jpg" alt="" />
</div>
<span class="cc_title">Main page</span>
</div>
<div class="cc_item" style="z-index:5;">
<div class="maged">
<img src="http://www.hintmag.com/blog/uploaded_images/brunopieters05-717446.jpg" alt="" />
</div>
<span class="cc_title">Second page</span>
</div>
<div class="cc_item" style="z-index:5;">
<div class="maged">
<img src="http://www.delhierro.ca/wp-content/uploads/2010/11/Fashion-Studio-01S.jpg" alt="" />
</div>
<span class="cc_title">Third page</span>
</div>
<div class="cc_item" style="z-index:5;">
<div class="maged">
<img src="http://lockdownmodels.files.wordpress.com/2009/05/kell-1.jpg?w=200&h=600" alt="" />
</div>
<span class="cc_title">Fourth page</span>
</div>
</div>
</body>
</html>