Make div expand on hover

Question

Basically, I just want to create a "relative" scale up of the div i'm hovering. I tried the following, but the output is a disaster. Help would be appericiated!

.item
{
    position: relative;
    display: inline-block;
    width: 20%;
    height: 100px;
    background-color: green;
    margin-right: 10px;
    transition: all 0.4s ease;
}

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

Desired solution:

enter image description here *IMPORTANT, the problem i'm currently having is keeping the padding between the items on scaling.

Link to: JsFiddle

@user3135227 It does, but I want the padding to move relatively. So I don't have to give a margin right / margin left. — Bilal075, Jul 21 '15 at 19:47
Try this: http://stackoverflow.com/questions/18833437/maintain-padding-when-scaling-image-inside-fixed-size-container — Augustmae, Jul 21 '15 at 19:53
@Bilal075 Your question need to be more specific, here on stack overflow, we are not mind readers. — Adam Buchanan Smith, Jul 21 '15 at 19:53
Does this answer your question? [How to expand a div and its contents on hover?](https://stackoverflow.com/questions/27441404/how-to-expand-a-div-and-its-contents-on-hover) — Kermit, Jan 10 '22 at 13:39

Hayden Schiff · Answer 1 · 2015-07-21T20:08:03.457

2

The problem with the other two answers is that they only work correctly with a static viewport. Here's a more dynamic solution:

.item
{
    position: relative;
    display: inline-block;
    width: 20%;
    height: 100px;
    background-color: green;
    margin-right: 10px;
    transition: all 0.4s ease;
}

.item:hover
{
    transform: scale(1.5);
    margin-right: 6%; /* fallback for ancient browsers that don't support calc() */
    margin-right: calc(5% + 10px);
    margin-left: 5%;
}

jsfiddle

edited Jul 21 '15 at 20:08

answered Jul 21 '15 at 19:54

Hayden Schiff

3,280
19
41

Is it possible to let the padding move relatively, without calculating / setting the margin-right / margin-lefts value? – Bilal075 Jul 21 '15 at 19:59
This padding _does_ move relatively -- it's 5% of the page width, so it'll be more padding on a wider page. If you adjust the width of the output area in the jsfiddle, you'll see it displays correctly at all widths. – Hayden Schiff Jul 21 '15 at 20:01
That's true but i'm still giving the the left / right margin a value. Which is not what I want to do – Bilal075 Jul 21 '15 at 20:06
I don't understand; why is that a problem? You can't have padding without setting padding. – Hayden Schiff Jul 21 '15 at 20:07
Cause whenever i'm setting a padding, the item(s) at the end continues moving, even though they're not affected (the only three items that has to be affected (by the 'hover' effect) has to be the one that's being hovered and the one on its right side and left side. – Bilal075 Jul 21 '15 at 20:14
Think I might sorta get the idea you're going after, but I can't figure out a way to implement it. Was trying something with having a parent element for each item, but couldn't get it working :P – Hayden Schiff Jul 21 '15 at 20:25
Well, found a much cleaner way using transform-origin: 0% 50% and then manually set the margin-right :) – Bilal075 Jul 21 '15 at 20:47

score 0 · Answer 2 · answered Jul 21 '15 at 19:49

0

Just adjust your margins, this seems to be working well:

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

answered Jul 21 '15 at 19:49

CamJohnson26

1,119
1
15
40

I want the padding to move relatively wise. So without giving the margin-left / margin-right a value. – Bilal075 Jul 21 '15 at 19:50
You want it to scale vertically but not horizontally? Or do you want the other elements to scale down? Sorry, having trouble understanding that diagram – CamJohnson26 Jul 21 '15 at 19:53
I want the effect, it currently has and keep the padding aswell. So whenever i'm hovering an item it scales the item & padding at the same time (without adjusting the margin-left / margin-rights value). – Bilal075 Jul 21 '15 at 19:56
I see, then could you just adjust width and height instead of scale? Might have to do something fancy to realign them, but you'll keep the padding. – CamJohnson26 Jul 21 '15 at 20:06

score -1 · Answer 3 · answered Jul 21 '15 at 19:56

-1

I don't think you can do that with out setting a value.

answered Jul 21 '15 at 19:56

Augustmae

89
3
8

Make div expand on hover

3 Answers3