html - Make div expand on hover -


basically, want create "relative" scale of div i'm hovering. tried following, output disaster. appericiated!

.item {     position: relative;     display: inline-block;     width: 20%;     height: 100px;     background-color: green;     margin-right: 10px;     transition: 0.4s ease; }  .item:hover {     transform: scale(1.5);     margin-right: 40px;     margin-left: 26px; } 

desired solution:

enter image description here *important, problem i'm having keeping padding between items on scaling.

link to: jsfiddle

just adjust margins, seems working well:

.item:hover {     transform: scale(1.5);     margin-right: 54px;     margin-left: 44px; } 

Comments

Popular posts from this blog

c - Bitwise operation with (signed) enum value -

xslt - Unnest parent nodes by child node -

YouTubePlayerFragment cannot be cast to android.support.v4.app.Fragment -