Сделать div expand on hover

-2

В принципе, я просто хочу создать «относительный» масштаб div, который я вишу. Я попробовал следующее, но результат - катастрофа. Помощь будет опробована!Сделать div expand on hover

.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; 
}

Желаемое решение:

enter image description here * ВАЖНО, проблема я в настоящее время имея держу отступы между пунктами масштабирования.

Ссылка: JsFiddle

источник

2015-07-21 Bilal075

JSFiddle отлично подходит для данной фотографии! – iamhimadri

@ user3135227 Он делает, но я хочу, чтобы отступы двигались относительно. Поэтому мне не нужно давать правую маржу/маржу слева. – Bilal075

Попробуйте это: http://stackoverflow.com/questions/18833437/maintain-padding-when-scaling-image-inside-fixed-size-container – Augustmae

Просто настроить поля, это, кажется, работает хорошо:

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

источник

2015-07-21 19:49:07 CamJohnson26

Я хочу, чтобы прокладка двигалась относительно разумно. Таким образом, без значения margin-left/margin-right значение. – Bilal075

Вы хотите, чтобы он масштабировался вертикально, но не горизонтально? Или вы хотите, чтобы другие элементы уменьшались? Извините, у меня возникли проблемы с пониманием этой диаграммы. – CamJohnson26

Мне нужен эффект, который в настоящее время имеет и поддерживает прокладку. Поэтому всякий раз, когда я нахожу элемент, он одновременно масштабирует элемент и дополнение (без корректировки значения margin-left/margin-rights). – Bilal075

Проблема с двумя другими ответами, что они работают только правильно с помощью статического просмотра. Вот более динамическое решение:

.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

источник

2015-07-21 19:54:31

Можно ли перемещать прокладку относительно, не вычисляя/не устанавливая значение margin-right/margin-lefts? – Bilal075

Эта прокладка _does_ перемещается относительно - это 5% от ширины страницы, поэтому это будет больше отступов на более широкой странице. Если вы отрегулируете ширину области вывода в jsfiddle, вы увидите, что она отображается правильно на всех ширинах. –

Это правда, но я все же даю левое/правое поле значение. Что не то, что я хочу сделать – Bilal075

-1

Я не думаю, что вы можете сделать это с вне установки значения.

источник

2015-07-21 19:56:25 Augustmae

Сделать div expand on hover

ответ

Смежные вопросы