Clever Geek Handbook

Move div based on div height to it

I am working on informational banners. There are several div

at each other with a hover mask on them. On hover they change their text. Sometimes the hover text will be longer than the parent, div

below the hover 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>
Run code


On hover changes the opacity of the main and oil banner, which works, but the second one div

appears above the hover text. Is there a solution (pure CSS would be better) to move the next one div

under the hover div

based on the relative height of the hover text?

+3


source to share


1 answer


You won't be able to use position: absolute;

for .mask-banner

as it will take it out of the document flow and other elements won't know about it. You can get around this:

  • Move detection hover

    to parent.quick-banner

  • Save .mask-banner

    to stream (don't use position: absolute;

    )
  • Hide content .main-banner

    when .quick-banner

    frozen.

To keep the animation intact, you cannot hide mask-banner

with display: none;

, so you can do it using height: 0;

and overflow: hidden;

.



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>
Run code


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

+1


source






More articles:


All Articles