CSS translate child when parent is hovered

Question

I'm trying to create a button with a sliding background. This button is composed from

• parent: a container with a border (.slidebutton)
• child: a text for the button prompt (.text)
• child: a colored background that slides-in when container is hovered (.background)

I would like to perform slide-in transition with CSS properties on . This is my current code (I've commented overflow statement on parent to show sliding background):

.slidebutton {
    display:inline-block;
    text-align:center;
    padding:16px 30px;
    border:1px solid green;
    position:relative;
    cursor:pointer;
    /*overflow:hidden;*/
}

.slidebutton>.background {
    position:absolute;
    top:100%;
    left:0%;
    width:100%;
    height:100%;
    background-color:green;
    -webkit-transition: 0.2s ease-in-out;
    -moz-transition: 0.2s ease-in-out;
    -o-transition: 0.2s ease-in-out;
    transition: 0.2s ease-in-out;
}

.slidebutton:hover .slidebutton>.background {
    -webkit-transform: translate(0%,-100%);
    -moz-transform: translate(0%,-100%);
    -o-transform: translate(0%,-100%);
    -ms-transform: translate(0%,-100%);
    transform: translate(0%,-100%);
}

JSFiddle

When I hover the container nothing happens. What am I missing?

Answer 1

So close.. You just need to remove the .slidebutton from the hover action as you are already inside this element by using .slidebutton:hover

JSFiddle

.slidebutton:hover> /*removed: .slidebutton */ .background {
-webkit-transform: translate(0%,-100%);
-moz-transform: translate(0%,-100%);
-o-transform: translate(0%,-100%);
-ms-transform: translate(0%,-100%);
transform: translate(0%,-100%);
}