Flickering Div When Using Css Transform On Hover

I'm making a div on top of the tweet (and also the Facebook like) button. I want it to move up as soon as I hover above the div (button) so you can actually press the real tweet bu

Solution 1:

I don't know why you need animations for this when you can simply achieve the above using transitions

The trick is to move the child element on parent hover

Demo

div {
    margin: 100px;
    position: relative;
    border: 1px solid #aaa;
    height: 30px;
}

divspan {
    position: absolute;
    left: 0;
    width: 100px;
    background: #fff;
    top: 0;
    -moz-transition: all 1s;
    -webkit-transition: all 1s;
    transition: all 1s;
}

divspan:nth-of-type(1) {
/* Just to be sure the element stays above the 
   content to be revealed */z-index: 1;
}

div:hoverspan:nth-of-type(1) { /* Move span on parent hover */top: -40px;
}

---

Explanation: Firstly we wrap span's inside a div element which is position: relative; and later we use transition on span which will help us to smooth the flow of the animation, now we use position: absolute; with left: 0;, this will stack elements on one another, than we use z-index to make sure the first element overlays the second.

Now at last, we move the first span, we select that by using nth-of-type(1), which is nothing but first child of it's kind which is nested inside div, and we assign top: -40px; which will transit when the parent div is hovered.