CODEWITHSUNDEEP
htmlcss
user2798091
user2798091

Reputation: 606

Preventing the other divs from moving on hover

I have a div which I want to move on hover. However, everything below this div also moves. I only want the div class="plantools" to move on hover and not everything else underneath it. How do I stop this from happening. Please see the fiddle here.

HTML:

<div id="home-plantools-col">
 <div class="plantools">
    <p>content</p>
</div>
</div>

<div id="homemidcontent">
 <div id="home-dir-left">Test</div>
</div>

CSS:

#home-plantools-col {
width:20%;
padding:5px;
}

.plantools {
background: red;
-webkit-transition: margin 0.2s ease-out;
-moz-transition: margin 0.2s ease-out;
-o-transition: margin 0.2s ease-out;
}

.plantools:hover {
margin-top: -10px;
}

Upvotes: 0

Views: 105

Answers (4)

John Lieb-Bauman
John Lieb-Bauman

Reputation: 1436

I personally think it is far easier to use 

.plantools {
    background: red;
    position:relative;
    -webkit-transition: top 0.2s ease-in-out;
    -moz-transition: top 0.2s ease-in-out;
    -o-transition: top 0.2s ease-in-out;
}
.plantools:hover {
    top:-10px;
}

I used ease-in-out just because I like it better, but you can still use ease-out

JSFIDDLE

Upvotes: 0

Alexandre Lavoie
Alexandre Lavoie

Reputation: 61

Simply add "position:relative" to .plantools and change "margin-top:-10px" by "top:-10px" in .plantools:hover.

This way, the element will be moved up but will keep the same position in the flow.

See fiddle here

Here is the updated css :

#home-plantools-col {
width:20%;
padding:5px;
}
.plantools {  
position:relative;
background: red;
-webkit-transition: margin 0.2s ease-out;
-moz-transition: margin 0.2s ease-out;
-o-transition: margin 0.2s ease-out;
}
.plantools:hover {
top: -10px;
}

Upvotes: 0

pleasedontbelong
pleasedontbelong

Reputation: 20102

A nasty dirty way to do it,if you know the heigth it will take, is by using a wrap div:

<div id="wrapper">
<div id="home-plantools-col">
    <div class="plantools">
        <p>content</p>
    </div>
</div>
</div>

and set the wrap's height to something fixed:

JsFiddle Demo

Upvotes: 0

Itay
Itay

Reputation: 16777

Use transform instead of margin

jsFiddle Demo

.plantools {
    -webkit-transition: transform 0.2s ease-out;
    -moz-transition: transform 0.2s ease-out;
    -o-transition: transform 0.2s ease-out;
    transition: transform 0.2s ease-out;
}
.plantools:hover {
    -webkit-transform: translateY(-10px);
    -ms-transform: translateY(-10px);
    transform: translateY(-10px);
}

Upvotes: 1

Related Questions