tgoop.com/frontendInterview/3809
Create:
Last Update:
Last Update:
Как увеличить в размере при наведении элемент, не сдвигая соседние?
Чтобы увеличить элемент в размере при наведении, не сдвигая при этом соседние элементы, можно использовать CSS свойство transform с функцией scale. Это позволяет изменять размер элемента, не влияя на его положение и соседние элементы, так как трансформация происходит в контексте самого элемента и не меняет его фактические размеры в документе.
Пример использования
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Увеличение при наведении</title>
<style>
.container {
display: flex;
gap: 10px;
}
.item {
width: 100px;
height: 100px;
background-color: lightblue;
text-align: center;
line-height: 100px;
transition: transform 0.3s;
}
.item:hover {
transform: scale(1.2); /* Увеличение размера при наведении */
}
</style>
</head>
<body>
<div class="container">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
</div>
</body>
</html>
Объяснение
`transition: transform 0.3s;`: Это свойство добавляет плавный переход для любых изменений, связанных с трансформацией элемента. В данном случае, это применимо к изменению масштаба (
transform: scale(1.2)), которое происходит при наведении.`transform: scale(1.2);`: Эта строка кода увеличивает размер элемента на 20% при наведении (
hover). Значение 1.2 означает увеличение на 20% по обеим осям (X и Y).Контейнер с `display: flex;` Используется для демонстрации того, что элементы остаются на своих местах и не сдвигаются при увеличении одного из них.
gap добавляет пространство между элементами.👉 @frontendInterview
BY Frontend Interview - собеседования по Javascript / Html / Css
Share with your friend now:
tgoop.com/frontendInterview/3809