Cronos

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

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

Cronos    0

Доброго времени суток. 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;
} 
 
Как сделать чтобы паддинг и бордет не считались в размер блока при наведении?
 

 

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


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

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

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

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


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

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

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

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

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


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

1 - box-product > div {

border 1px solid transparent

...
}

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

...
}

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


Ссылка на сообщение
Поделиться на другие сайты
Cronos    0
.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 блоки ездят. Может гляните на сам сайт? могу в лс кинуть адрес

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


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


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

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


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

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

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

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


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

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

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

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

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

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

Войти

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

Войти


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

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