CODEWITHSUNDEEP
htmlcsspositioningcss-transitions
Ashley
Ashley

Reputation: 497

CSS3 Transition to not effect other elements?

Is it possible to have height transitions that don't affect the position of nearby elements?

This particular case involves divs with float:left.

Demo: http://ashleystewart.me/

I'd like the hover transition to go on top of the element you can see moving around.

Upvotes: 5

Views: 10241

Answers (6)

Vikash Mishra
Vikash Mishra

Reputation: 341

Put the <div> in a proper positioning. Keep the outside ones in position:fixed and the inner ones in position:absolute

Or the other way is to make the maximum height fixed for the outer <div> and the inner <div> should be kept the maximum transformation height equal to the outer one. It will help in not making other <div> getting affected on transaction

Or the other way can be, use blocks to display the content, rather using float way

Upvotes: 0

Bitclaw
Bitclaw

Reputation: 831

You can use position: absolute instead of position: fixed, this way the div won't move when you open web developer tools.

Upvotes: -1

Fernando Javier Santamarina Ca
Fernando Javier Santamarina Ca

Reputation: 111

You could use a transition on a transform by using. Transform will change the element without effecting layout. You would want to use transform: scaleY() say you wanted to double the height of something:

transform: scaleY(2);
-webkit-transform: scaleY(2);
-moz-transform: scaleY(2);
-o-transform: scaleY(2);

Upvotes: 0

user1680512
user1680512

Reputation:

You can use position property instead of using float property, you can do following:

#idname {
   position:fixed;
   margin-right:100px;
   margin-left:100px;
   margin-top:100px;
   margin-bottom:100px; /* I had written 100px only for example you can adjust it according to your screen */
}

#idname:hover {
   -moz-transtion: /* adjust the setting here for Firefox */;
   -webkit-transition: /* adjust the setting here for chrome and safari */;
   -o-transition: /* adjust the setting here for Opera */;
}

This will enable the moving of div and its position will be fixed.

Upvotes: 0

carpenumidium
carpenumidium

Reputation: 1203

Give the container boxes Relative positioning and the fly-out details box Absolute positioning. Since Absolute positioned elements are removed from the layout, it wont interfere with the floats.

demo: http://dabblet.com/gist/3729269

Upvotes: 2

Chris
Chris

Reputation: 26918

I'm afraid that in the current layout-logic you're following, it'd be very hard to fix.

Why? Because like your floats in the first row are aligned next to each other, when a box in the upper row is expanded on :hover, the floats in the bottom row will reposition relatively to that one as well.

Here's how I would go about achieving your idea:

  • Don't use floating, use something like display: inline-block;.
  • Your semantic article wrappers are causing issues when using inline-block;. Either get rid of them (oops, might not be SEO friendly), or make sure you aren't relying on overflow: hidden; when styling your "boxes."

Sorry I couldn't be of more help!

Upvotes: 1

Related Questions