CODEWITHSUNDEEP
javascripthtmlcssanimation
user3931028
user3931028

Reputation: 35

Move div based on height div up to him

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?

Upvotes: 3

Views: 99

Answers (1)

Hidden Hobbes
Hidden Hobbes

Reputation: 14173

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/

Upvotes: 1

Related Questions