Перейти к содержанию
Cronos

Эффект при наведении на продукт.

Рекомендуемые сообщения

Доброго времени суток. 2 дня мучаюсь с эффектом при наведении на продукт. Сделать желаемое получилось. Но вот когда навожу на продукт остальные блоки "прыгают".

CSS:.box-product > div {
width: 168px;
display: inline-block;
vertical-align: top;
margin: 10px;
}


.box-product > div:hover {
box-shadow: 0 0 15px #00aaff;
border: 1px solid #00aaff;
padding: 5px;
} 
 
Как сделать чтобы паддинг и бордет не считались в размер блока при наведении?
 

 

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

1 - делать при наведении outline

2 - ставить изначально border transparent

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

1 - делать при наведении outline

2 - ставить изначально border transparent

А можно там простенька нацарапать а то непонятно маленько. Я конечно прочту как сделать и постараюсь сам вникнуть....

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

1 - box-product > div {

border 1px solid transparent

...
}

2
.box-product > div:hover {
outline: 1px solid #00aaff;

...
}

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты
.box-product > div {
	width: 168px;
	display: inline-block;
	vertical-align: top;
	margin: 10px;
	border: 1px solid transparent;
}
.box-product > div:hover {
	box-shadow: 0 0 15px #00aaff;
	border: 1px solid #00aaff;
	padding: 5px;
	outline: 1px solid #00aaff;
}	

0_0 блоки ездят. Может гляните на сам сайт? могу в лс кинуть адрес

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

дайте сайт, так проще будет

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты


CSS:.box-product > div {
width: 168px;
display: inline-block;
vertical-align: top;
margin: 10px;
}


.box-product > div:hover {
box-shadow: 0 0 15px #00aaff;
border: 1px solid #00aaff;
padding: 5px;
} 

Конечно блоки будут прыгать, если Вы ставите padding: 5px с каждой стороны + 1px границу border, а чего еще можно было ожидать? 

 

сделайте хотя-бы так что ли:



CSS:.box-product > div {
width: 168px;
display: inline-block;
vertical-align: top;
margin: 10px;
border: 1px solid #fff;
}
.box-product > div:hover {
box-shadow: 0 0 15px #00aaff;
border: 1px solid #00aaff;
padding: 5px;
box-sizing: border-box;
} 
Изменено пользователем OldAine

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

Outline заменяет border в данном случае

Изменено пользователем timedontwait

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

Для публикации сообщений создайте учётную запись или авторизуйтесь

Вы должны быть пользователем, чтобы оставить комментарий

Создать учетную запись

Зарегистрируйте новую учётную запись в нашем сообществе. Это очень просто!

Регистрация нового пользователя

Войти

Уже есть аккаунт? Войти в систему.

Войти

  • Последние посетители   0 пользователей онлайн

    Ни одного зарегистрированного пользователя не просматривает данную страницу

×

Важная информация

На нашем сайте используются файлы cookie и происходит обработка некоторых персональных данных пользователей, чтобы улучшить пользовательский интерфейс. Чтобы узнать для чего и какие персональные данные мы обрабатываем перейдите по ссылке. Если Вы нажмете «Я даю согласие», это означает, что Вы понимаете и принимаете все условия, указанные в этом Уведомлении о Конфиденциальности.