Move div based on height div up to him

Question

I am working on information banners. There are few divs on top of each other with a hover mask on them. On hover they change their text. Sometimes the hover text will be longer than the parent, the div below the hovered one should move under the hover text.

div.quick-banner {
  width: 440px;
  margin: 0 0 0 15px;
  position: relative;
}
div.quick-banner div.mask-banner {
  width: 420px;
  position: absolute;
  top: 0;
  left: 0;
  padding: 10px;
  text-align: center;
}
div.quick-banner div.mask-banner h2 {
   color: #fff;
   text-align: center;
   position: relative;
   font-size: 17px;
   padding: 3px;
   background: rgba(0, 0, 0, 0.8);
   margin: 0;
}
div.quick-banner div.mask-banner {
   -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)";
   filter: alpha(opacity=0);
   opacity: 0;
   background-color: #004f6e;
   -webkit-transition: all 0.4s ease-in-out;
   -moz-transition: all 0.4s ease-in-out;
   -o-transition: all 0.4s ease-in-out;
   -ms-transition: all 0.4s ease-in-out;
   transition: all 0.4s ease-in-out;
}
div.quick-banner:hover div.mask-banner {
   -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=100)";
   filter: alpha(opacity=100);
   opacity: 1;
}
div.quick-banner div.mask-banner h2 {
   -webkit-transform: translateY(-100px);
   -moz-transform: translateY(-100px);
   -o-transform: translateY(-100px);
   -ms-transform: translateY(-100px);
   transform: translateY(-100px);
   -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)";
   filter: alpha(opacity=0);
   opacity: 0;
   -webkit-transition: all 0.2s ease-in-out;
   -moz-transition: all 0.2s ease-in-out;
   -o-transition: all 0.2s ease-in-out;
   -ms-transition: all 0.2s ease-in-out;
   transition: all 0.2s ease-in-out;
}
div.quick-banner div.mask-banner:hover h2,
div.quick-banner div.mask-banner:hover p,
div.quick-banner div.mask-banner:hover a.info {
   -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=100)";
   filter: alpha(opacity=100);
   opacity: 1;
   -webkit-transform: translateY(0px);
   -moz-transform: translateY(0px);
   -o-transform: translateY(0px);
   -ms-transform: translateY(0px);
   transform: translateY(0px);
}
div.quick-banner div.mask-banner p {
   -webkit-transform: translateY(100px);
   -moz-transform: translateY(100px);
   -o-transform: translateY(100px);
   -ms-transform: translateY(100px);
   transform: translateY(100px);
   -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)";
   filter: alpha(opacity=0);
   opacity: 0;
   -webkit-transition: all 0.2s linear;
   -moz-transition: all 0.2s linear;
   -o-transition: all 0.2s linear;
   -ms-transition: all 0.2s linear;
   transition: all 0.2s linear;
}

<div class="quick-banner">
    <div class="main-banner">
        <h2>Head 1</h2>
        <p>This is first text of first banner.</p>
    </div>
    <div class="mask-banner">
        <h2>Head HOVER 1</h2>
        <p>Text after hover longer (3-5 rows). Text after hover       longer (3-5 rows). Text after hover longer (3-5 rows). Text after hover longer (3-5 rows)</p>
    </div>
</div>
<div class="quick-banner">
    <div class="main-banner">
        <h2>Head 2</h2>
        <p>This is first text of first banner.</p>
    </div>
    <div class="mask-banner">
        <h2>Head HOVER 2</h2>
        <p>Text after hover longer (3-5 rows). Text after hover       longer (3-5 rows). Text after hover longer (3-5 rows). Text after hover longer (3-5 rows)</p>
    </div>
</div>

On hover I change the opacity of main and mask banner, which is working but the second div is appearing over the hovered text. Is there a solution (pure CSS would be best) to move the next div under the hover div based on relative height of the hover text?

Can you put a simple fiddle together so that we can take a look? — Aram, May 08 '15 at 19:11
Yes i put it on fiddle, i made there some mistake, but point is that i need second banner to move under first after i hover first. http://jsfiddle.net/r1yk5on3/ — user3931028, May 08 '15 at 19:34

score 1 · Accepted Answer · answered May 08 '15 at 20:15

You won't be able to use position: absolute; for .mask-banner as it will take it out of the document flow and the other elements will not be aware of it. You can get round this by:

Moving the hover detection to the parent .quick-banner
Keeping .mask-banner in the flow (don't use position: absolute;)
Hide the content of .main-banner when .quick-banner is hovered

To keep the animation intact you won't be able to hide mask-banner using display: none; so you can do this by using height: 0; and overflow: hidden; instead.

div.quick-banner {
    width: 440px;
    margin: 0 0 0 15px;
    position: relative;
}
div.quick-banner div.mask-banner {
    width: 420px;
    position: relative; /*Change this*/
    top: 0;
    left: 0;
    padding: 0; /*Change this*/
    text-align: center;
    height: 0; /*Add this*/
    overflow: hidden; /*Add this*/
}
div.quick-banner div.mask-banner h2 {
    color: #fff;
    text-align: center;
    position: relative;
    font-size: 17px;
    padding: 3px;
    background: rgba(0, 0, 0, 0.8);
    margin: 0;
}
div.quick-banner div.mask-banner {
    -ms-filter:"progid: DXImageTransform.Microsoft.Alpha(Opacity=0)";
    filter: alpha(opacity=0);
    opacity: 0;
    background-color: #004f6e;
    -webkit-transition: all 0.4s ease-in-out;
    -moz-transition: all 0.4s ease-in-out;
    -o-transition: all 0.4s ease-in-out;
    -ms-transition: all 0.4s ease-in-out;
    transition: all 0.4s ease-in-out;
}
div.quick-banner:hover div.mask-banner {
    -ms-filter:"progid: DXImageTransform.Microsoft.Alpha(Opacity=100)";
    filter: alpha(opacity=100);
    opacity: 1;
    height: auto; /*Add this*/
    padding: 10px; /*Add this*/
}
div.quick-banner div.mask-banner h2 {
    -webkit-transform: translateY(-100px);
    -moz-transform: translateY(-100px);
    -o-transform: translateY(-100px);
    -ms-transform: translateY(-100px);
    transform: translateY(-100px);
    -ms-filter:"progid: DXImageTransform.Microsoft.Alpha(Opacity=0)";
    filter: alpha(opacity=0);
    opacity: 0;
    -webkit-transition: all 0.2s ease-in-out;
    -moz-transition: all 0.2s ease-in-out;
    -o-transition: all 0.2s ease-in-out;
    -ms-transition: all 0.2s ease-in-out;
    transition: all 0.2s ease-in-out;
}
/*Change this*/
div.quick-banner:hover div.mask-banner h2, div.quick-banner:hover div.mask-banner p, div.quick-banner:hover div.mask-banner a.info {
    -ms-filter:"progid: DXImageTransform.Microsoft.Alpha(Opacity=100)";
    filter: alpha(opacity=100);
    opacity: 1;
    -webkit-transform: translateY(0px);
    -moz-transform: translateY(0px);
    -o-transform: translateY(0px);
    -ms-transform: translateY(0px);
    transform: translateY(0px);
}
div.quick-banner div.mask-banner p {
    -webkit-transform: translateY(100px);
    -moz-transform: translateY(100px);
    -o-transform: translateY(100px);
    -ms-transform: translateY(100px);
    transform: translateY(100px);
    -ms-filter:"progid: DXImageTransform.Microsoft.Alpha(Opacity=0)";
    filter: alpha(opacity=0);
    opacity: 0;
    -webkit-transition: all 0.2s linear;
    -moz-transition: all 0.2s linear;
    -o-transition: all 0.2s linear;
    -ms-transition: all 0.2s linear;
    transition: all 0.2s linear;
}
/*Add this*/
div.quick-banner:hover div.main-banner {
    display: none;
}

<div class="quick-banner">
    <div class="main-banner">
         <h2>Head 1</h2>

        <p>This is first text of first banner.</p>
    </div>
    <div class="mask-banner">
         <h2>Head HOVER 1</h2>

        <p>Text after hover longer (3-5 rows). Text after hover longer (3-5 rows). Text after hover longer (3-5 rows). Text after hover longer (3-5 rows)</p>
    </div>
</div>
<div class="quick-banner">
    <div class="main-banner">
         <h2>Head 2</h2>

        <p>This is first text of first banner.</p>
    </div>
    <div class="mask-banner">
         <h2>Head HOVER 2</h2>

        <p>Text after hover longer (3-5 rows). Text after hover longer (3-5 rows). Text after hover longer (3-5 rows). Text after hover longer (3-5 rows)</p>
    </div>
</div>

JS Fiddle: http://jsfiddle.net/xtfzgrcm/2/

Thank you, thats perfetct, now i am trying to animate that change of height of 0 to auto, but transition: height 0.3s ease-out; and ease-in not working... Some tips? — user3931028, May 08 '15 at 20:37
Unfortunately animating `height` when you don't know how high the content is is a bit tricky. http://stackoverflow.com/questions/3508605/css-transition-height-0-to-height-auto may be able to help you in that regard. You'll have to experiment, but in this case animating `height` may cause issues with the hover effect as `.quick-banner`'s `height` is determined by its content. — Hidden Hobbes, May 08 '15 at 20:48

Move div based on height div up to him

1 Answers1