Move social bar to the left on hover - css

Question

I would like to have a social bar on the right, and scrolling with the page. This is ok, but I would like to add some behaviors: If you hover the facebook logo, the logo moves to the left, and shows the like button. And same behavior for twitter. I already made a jsfiddle, so here's the link: Demo here.
In the fiddle, at the moment my whole bar moves to the left, but I want the social buttons moving individually.
I am fine with JavaScript/jQuery, if necessary.
Here's my CSS and HTML code:
.off-canvas-buttons{
background-color:rgba(0,0,0,0.5);
top:10%;
height:auto;
right:55px;
width:100px;
text-align:center;
position:fixed;
line-height:50px;
transition:transform 1s ease;
}
.off-canvas-buttons > *, .off-canvas-buttons > * > *{
height:50px;
border:1px dashed red
}
.off-canvas-buttons:hover{
transform:translate(-55px);
}
.backtotop{
width:45px;
}
.facebook-logo, .twitter-logo{
background-color:rgba(200,0,0,0.5);
width:45px;
float:left;
}
<div class="off-canvas-buttons">
<div class="facebook">
<div class="facebook-logo">FB</div>
<div class="facebook-like">Like</div>
</div>
<div class="twitter">
<div class="twitter-logo">Twi</div>
<div class="twitter-follow">Follow</div>
</div>
<div class="backtotop">▲</div>
</div>

Answer 1

I've found what I wanted to (it was a CSS rule problem). Here is the updated fiddle: updated fiddle
Here is the code:
.cover {
right: 0;
height: 100%;
width: 110px;
background: red;
position: fixed;
}
.off-canvas-buttons {
top: 10%;
height: auto;
right: 55px;
width: 100px;
text-align: center;
position: fixed;
line-height: 50px;
}
.off-canvas-buttons > * {
height: 50px;
background-color: rgba(0, 0, 0, 0.4);
}
.social {
transition: transform 2s ease;
}
.off-canvas-buttons > .social:hover {
transform: translate(-55px);
}
.off-canvas-buttons > .social:hover >:first-child {} .backtotop {
width: 45px;
}
.facebook-logo,
.twitter-logo {
width: 45px;
float: left;
}
<div class="cover">
<div>
<div class="off-canvas-buttons">
<div class="facebook social">
<div class="facebook-logo logo">F</div>
<div class="facebook-like action">L</div>
</div>
<div class="twitter social">
<div class="twitter-logo logo">T</div>
<div class="twitter-follow action">S</div>
</div>
<div class="backtotop">▲</div>
</div>