Make div move other divs on hover
I want my "show-up" -div to show up when my "box" -div hangs. the other "box" -digi should remain where they are, unless they fall under. So if I find one of the 4 '' boxes at the top, the other 8 divs have to move down, so there is room for a red bow.
Html
<body>
<div class="beholder">
<div class="beholder_lille">
<div class="box"></div>
<div class="appear"></div>
</div>
<div class="beholder_lille">
<div class="box"></div>
<div class="appear"></div>
</div>
<div class="beholder_lille">
<div class="box"></div>
<div class="appear"></div>
</div>
<div class="beholder_lille">
<div class="box"></div>
<div class="appear"></div>
</div>
</div>
<div class="beholder">
<div class="beholder_lille">
<div class="box"></div>
<div class="appear"></div>
</div>
<div class="beholder_lille">
<div class="box"></div>
<div class="appear"></div>
</div>
<div class="beholder_lille">
<div class="box"></div>
<div class="appear"></div>
</div>
<div class="beholder_lille">
<div class="box"></div>
<div class="appear"></div>
</div>
</div>
</body>
CSS
.beholder {
width: 50%;
display:table;
margin: 0 auto;
}
.beholder_lille {
background-color: green;
float: left;
margin:0 4%;
margin-bottom: 30%;
}
.box , .appear{
background: blue;
height: 100px;
width: 100px;
float:left;
}
.appear{
background:red;
float: left;
display: none;
clear: both;
height: 600px;
width: 600px;
}
.box:hover{
background: #e6e6e6;
}
.box:hover + .appear {
display:block;
}
Hope some inspiration can help me
source to share
Ok, I made a fiddle using javascript (jQuery). Each time you hover an element .box
, it takes into account the height difference between .beholder
and .appear
and sets the difference margin-bottom
to .beholder
. If the height difference is less than zero, it is returned from the function. You can adjust the bottom margin in var adjust
I set it to 20 ...
source to share