Rick Rick - 3 years ago 63
CSS Question

Change Y position on hover

I am trying to make it so that when you hover the mother or the sliding_child, the position of the sliding_child moves to the bottom half of the sliding_child. Notice that the height is twice as long as the mother.

HTML

<div class="mother">
<div class="sliding_child">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed in risus accumsan, elementum ipsum id, molestie lorem. Suspendisse eu eros vitae ipsum consequat vehicula quis fermentum tortor.</p>
</div>
</div>


CSS

div.mother {
overflow: hidden;
width: 200px;
height: 300px;
}

div.sliding_child {
width: 200px;
height: 600px;
}

Answer Source

Try this:-

div.mother {
width: 200px;
height: 300px;
border:1px solid black;
position : absolute;
overflow : hidden;
}

div.sliding_child {
width: 200px;
height: 600px;
position : relative;

}
div.sliding_child p{
height : 300px;
margin : 0px !important;
}
div.sliding_child p:first-child {
background : blue;
}
div.sliding_child p:nth-child(2) {
background : yellow;
}
div.sliding_child:hover {

top:-300px;
}

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download