Question: I have a since in which when users register, I need to ask them to invite their contacts from YahooMessenger. But sadly, I have no clue as to how to even begin. Any answers or links would be awesome.

Answer: 
Try this - [**DEMO**](http://jsfiddle.net/uK3mr/)

***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***

```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;
}

```
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;
}

```