Hover css slide out for multiple objects/items - html

Question

I am doing a website project and I would like to have this cool hover effect but I can't seem to get it to work right?
I have a vinyl record case image that slides to the left with a title (overflow:hidden) to reveal the record image behind it. At the same time from the left I want a description of the record to slid out from behind the vinly record case thats moving to the left and be on top of the record image with a little opacity so you can still see the record(this part is easy)
Here is the html code:
<div id="stations">
<div class="grid_3">
<div class="records"><!-- sleeve -->
<h3>Groove Salad</h3>
<div class="recordsinfo">Station description.</div>
</div>
</div>
</div>
and here is the css code:
#stations>div {
background-image: url(http://benlevywebdesign.com/somafm/images/SomaFMrecord.png);
background-repeat:no-repeat;
height: 220px;
margin-bottom: 20px;
position: relative;
overflow:hidden;
}
#stations>div>.records{
background-image: url(http://benlevywebdesign.com/somafm/images/SomaFM.png);
background-repeat:no-repeat;
height: 220px;
margin-bottom: 20px;
overflow:hidden;
position:relative;
}
#stations>div>.records>h3 {
color: #FFF;
background-color: rgba(255,255,255, 0.45);
width:200px;
margin-top:0px;
margin-bottom:-5px;
padding: 10px 10px 3px;
}
#stations>div>.records>.recordsinfo{
position: absolute;
left:-150px;
bottom: 0;
margin: 5px 10px;
}
#-moz-keyframes slideout {
0% { left:0; }
100% { left:-100px; }
}
#-webkit-keyframes slideout {
0% { left:0; }
100% { left:-100px; }
}
#keyframes slideout {
0% { left:0; }
100% { left:-100px; }
}
#stations>div>.records:hover{
height: 220px;
width:220%;
margin-bottom: 20px;
left:-100px;
overflow:hidden;
position: relative;
-moz-animation: slideout 0.75s 1;
-webkit-animation: slideout 0.75s 1;
animation: slideout 0.75s 1;
}
#stations>div>.records>.recordsinfo:hover{
height: 220px;
width:220%;
left:150px;
overflow:hidden;
position: relative;
-moz-animation: slidein 0.75s 1;
-webkit-animation: slidein 0.75s 1;
animation: slidein 0.75s 1;
}
and here is a fiddle of it working up until the last part which is the description not working and sliding out left!
Updated fiddle
http://jsfiddle.net/Xc9U6/11/

Answer 1

Try this - DEMO
HTML
<div id="stations">
<div class="grid_3">
<div class="records"><!-- sleeve -->
<h3>Groove Salad</h3>
</div>
<div class="recordsinfo">Station description.</div>
</div>
</div>
CSS
#stations > div {
background-image: url(http://benlevywebdesign.com/somafm/images/SomaFMrecord.png);
background-repeat:no-repeat;
height: 220px;
margin-bottom: 20px;
position: relative;
overflow:hidden;
}
#stations > div:hover .records {
margin-left: -110px;
}
#stations .records{
background-image: url(http://benlevywebdesign.com/somafm/images/SomaFM.png);
background-repeat:no-repeat;
height: 220px;
margin: 0 0 20px 0;
overflow:hidden;
position:relative;
-webkit-transition: all .75s;
-moz-transition: all .75s;
transition: all .75s;
}
#stations h3 {
color: #FFF;
background-color: rgba(255,255,255, 0.45);
width:200px;
margin-top:0px;
margin-bottom:-5px;
padding: 10px 10px 3px;
}
#stations > div:hover .recordsinfo {
margin-left: 0;
}
#stations .recordsinfo {
background: rgba(0, 0, 0, .8);
color: #fff;
position: absolute;
width: 150px;
bottom: 0;
margin: 5px 10px 5px -150px;
-webkit-transition: all .75s;
-moz-transition: all .75s;
transition: all .75s;
}

Answer 2

If I understood well you want the title to remain where it is? if so here you go:
#stations > div > .records:hover h3 {
margin-left: 100px;
}

Answer 3

Finally! You had lots of different issues here, from setting a width of 220%, instead of px, To trying to animate a child of an animation (so it's positions were off), to not defining the slidein animation you wanted to use.
Try this: jsFiddle