CODEWITHSUNDEEP
cssuser-interface
Beast
Beast

Reputation: 615

Css3, show or hide child div when mouse hovers over parent div

I have two divs like 

<div class='parent'>
    <div class='child'></div>
</div>

If I want to slide in the child div from bottom when the mouse hovers over the parent. How can I do this?

Upvotes: 0

Views: 907

Answers (3)

damian
damian

Reputation: 5444

You could use CSS3 keyframes

http://jsfiddle.net/27N57/

@keyframes "move" {
 from {
    top: 200px;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    filter: alpha(opacity=0);
    opacity: 0;
 }
 to {
    top: 30px;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
    filter: alpha(opacity=100);
    opacity: 1;
 }

}

Upvotes: 2

Hushme
Hushme

Reputation: 3144

you can use this

here is demo http://jsfiddle.net/ww2zY/2

.parent {
    float:left;
    width:100%;
    height:170px;
    ;
    background:red;
    position:relative;
    overflow:hidden;
}
.child {
    position:absolute;
    left:0;
    bottom:0;
    float:left;
    width:100%;
    height:100px;
    background:green;
    transform:translateY(100px);
    -webkit-transform:translateY(100px);
    -moz-transform:translateY(100px);
    transition:all 1s linear;
    -webkit-transition:all 1s linear;
    -moz-transition:all 1s linear;
}
.parent:hover .child {
    transform:translateY(0px);
    -webkit-transform:translateY(0px);
    -moz-transform:translateY(0px);
}

Upvotes: 2

Hiren Purohit
Hiren Purohit

Reputation: 1

You can use tooltip js for this problem to solve.

Upvotes: 0

Related Questions