Geek asks and answers

CSS3 Transition so as not to affect other elements?

Is it possible to have height transitions that do not affect the position of adjacent elements?

In this particular case, divs with float: left are used.

Demo: http://ashleystewart.me/

I would like the hover transition to go to the element that you see moving.

+5
source share
6 answers

Give the container fields. Relative positioning and departure window. Absolute positioning. Since elements located at an absolute position are removed from the layout, they will not interfere with floats.

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

+1
source

, - , .

? floats , :hover, float .

:

  • float ing, - display: inline-block;.
  • article inline-block;. (oops, SEO), , overflow: hidden; "".

, !

+1

position float, :

#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 */;
}

div, .

0

. . transform: scaleY() , -:

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

<div> . : :

- <div>, <div> , . <div>

, float

0

You can use position: absoluteinstead position: fixed, so the div will not move when you open the web developer tools.

-1
source

More articles:


All Articles