CODEWITHSUNDEEP
htmlcsscss-transitionstransition
Jced
Jced

Reputation: 19

Equal Transition

I want to have a transition that extends a div both at the top and bottom on hover. Right now it overlaps the div above and pushes away the div on the bottom.

I want to either push away on both sides or overlap on both sides. Not one of both.

#blue, #red {
  width: 100%;
  height: 100px;
  float: left;
  transition: 0.8s;
  transition-timing-function: ease-out;
  font-size: 24px;
  margin-top: 0;
  margin-bottom: 0;
}

#blue {
  background-color: blue;
}

#red {
  background-color: red;
}

#blue:hover, #red:hover {
  height: 200px;
  font-size: 48px;
  margin-top: -50px;
}

This is what I'm working with:

#blue, #red {
  width: 100%;
  height: 50px;
  float: left;
  transition: 0.8s;
  transition-timing-function: ease-out;
  font-size: 12px;
  margin-top: 0;
  margin-bottom: 0;
}

#blue {
  background-color: blue;
}

#red {
  background-color: red;
}

#blue:hover, #red:hover {
  height: 100px;
  margin-top: -25px;
}
<div id="blue"></div>
<div id="red"></div>
<div id="blue"></div>
<div id="red"></div>
<div id="blue"></div>
<div id="red"></div>
<div id="blue"></div>

Thanks!

Upvotes: 1

Views: 52

Answers (3)

Jced
Jced

Reputation: 19

Not sure you guys really get what I'm trying to do. I'm not just trying to remove the overlapping, I'm trying to make the div expand on both top and bottom without interacting differently on top then on the bottom.

So for an example, if I hover over the red div, it pushes both blue divs touching it away OR overlapping both. I'm fine with either. Right now it overlaps on one end and pushes away on the other.

So to be clear, I DON'T want to simply make the div bigger without overlapping.

Thanks for the answers so far though!

Upvotes: 0

Lalit Sachdeva
Lalit Sachdeva

Reputation: 6619

PLease check this 

#blue, #red {
    width: 100%;
    height:50px;
    float: left;
    transition: 0.8s;
    transition-timing-function: ease-out;
    font-size: 12px;
    margin-top: 0;
    margin-bottom:0;
}
#blue {
    background-color: blue;
}
#red {
    background-color: red;
}
#blue:hover, #red:hover {
    height:100px;
    padding-top:25px;
}
    <div id="blue"></div>
    <div id="red"></div>
    <div id="blue"></div>
    <div id="red"></div>
    <div id="blue"></div>
    <div id="red"></div>
    <div id="blue"></div>

Upvotes: 0

Soolie
Soolie

Reputation: 1820

Here are your problems:

  1. Let's remove the float here, this is not required.
  2. Remove the negative margin, as this is what the overlapping code.
  3. Finally, correct the HTML without the repeating ID.

Snippet here:

.blue, .red {
  width: 100%;
  height: 50px;
  transition: 0.8s;
  transition-timing-function: ease-out;
  font-size: 12px;
  margin-top: 0;
  margin-bottom: 0;
}

.blue {
  background-color: blue;
}

.red {
  background-color: red;
}

.blue:hover, .red:hover {
  height: 100px;
  margin-top: 0px;
}
<div class="blue"></div>
<div class="red"></div>
<div class="blue"></div>
<div class="red"></div>
<div class="blue"></div>
<div class="red"></div>
<div class="blue"></div>

Upvotes: 1

Related Questions