text under a hover fading button - html

Question

UPDATE: I am wanting the text to be shown beneath the button, so when it fades away, it will be revealed where the button was.
How can i place text under (in the z axis) a button made with a a element so that when i hover over the button
it fades away and shows the text under?
I have tried using positioning to and position:absolute to make it so both text can be in one spot, but it wont seem to work
My button: http://jsfiddle.net/27bCK/
<div id="pricebar">
<a class="see" href="#">PRICING</a>
</div>
#pricebar {
width:100%;
height:175px;
background-color:#EAE5E5;
text-align:center;
}
#pricebar .see {
color:#fff;
font-size:50px;
line-height:175px;
background-color:#2ecc71;
border:5px solid #2ecc71;
border-radius:5px;
border-left:17px solid #2ecc71;
border-right:17px solid #2ecc71;
transition-duration: .3s;
transition-property: background-color, border, border-left, border-right, opacity;
}
#pricebar .see:hover {
opacity:0;
background-color:#27ae60;
border:5px solid #27ae60;
border-left:17px solid #27ae60;
border-right:17px solid #27ae60;
}
#pricebar .show {
color:#fff;
font-size:50px;
line-height:175px;
background-color:#000;
margin-right:20px;
}

Answer 1

try this:
<div id="pricebar">
<a class="see" href="#">PRICING</a>
<div id="hidden">hidden text</div>
</div>
css:
#hidden{
text-align:center;
position:relative;
bottom:100px;
z-index:0;
border:0px solid red;
}
#pricebar {
width:100%;
height:175px;
background-color:#EAE5E5;
text-align:center;
z-index:1;
}
#pricebar .see {
color:#fff;
font-size:50px;
line-height:175px;
background-color:#2ecc71;
border:5px solid #2ecc71;
border-radius:5px;
border-left:17px solid #2ecc71;
border-right:17px solid #2ecc71;
transition-duration: .3s;
transition-property: background-color, border, border-left, border-right, opacity;
position:relative;
z-index:3;
}
#pricebar .see:hover {
opacity:0;
background-color:#27ae60;
border:5px solid #27ae60;
border-left:17px solid #27ae60;
border-right:17px solid #27ae60;
}
#pricebar .show {
color:#fff;
font-size:50px;
line-height:175px;
background-color:#000;
margin-right:20px;
}

Answer 2

You could always try using jQuery to accomplish this. There may be an easier way but my mind is currently focused on jQuery. There is a class that allows you to add or remove something specific. Let's take a look at the jQuery added with this.
jQuery:
$('a').hover(
function() {
var $this = $(this); // caching $(this)
$this.data('initialText', $this.text());
$this.text("I'm replaced!");
},
function() {
var $this = $(this); // caching $(this)
$this.text($this.data('initialText'));
}
);
EDIT: I replaced the add/remove of the classes to using a way where you cache the data you originally had into a variable and as you hover over it, it actually changes to the data you put inside of jQuery function and as you hover out, it will change it back. To be honest, I cannot take credit for this, because it was originally found in this Stack question, meaning, you should just go up vote that answer instead. But this should work with what you want to do.
The JSFIDDLE

Answer 3

If you want to do it with pure css, there are some changes to make. Get rid of the line height, set position on both .see and .show to absolute, set position of pricebar to relative, give the see and show a height and width, put the content for .show above the .see element in your html, and fiddle with a negative margin to line them up.
#pricebar {
width:100%;
height:175px;
background-color:#EAE5E5;
text-align:center;
position:relative;
}
#pricebar .see {
color:#fff;
font-size:50px;
margin-left:-15%;
background-color:#2ecc71;
border:5px solid #2ecc71;
border-radius:5px;
border-left:17px solid #2ecc71;
border-right:17px solid #2ecc71;
transition-duration: .3s;
transition-property: background-color, border, border-left, border-right, opacity;
position:absolute;
height:60px;
width:234px;
top:60px;
}
#pricebar .see:hover {
opacity:0;
background-color:#27ae60;
border:5px solid #27ae60;
border-left:17px solid #27ae60;
border-right:17px solid #27ae60;
}
#pricebar .show {
color:#fff;
font-size:50px;
background-color:#000;
height:60px;
top:60px;
margin-left:-40px;
position:absolute;
}
You can see it in this fiddle