英文:
How can I prevent other elements from moving when an element grows in size on hover in CSS?
问题
<!-- 开始代码片段：js 隐藏：false 控制台：true Babel：false -->
<!-- 语言：lang-css -->
.aboutme {
padding-top: 15%;
display: flex;
justify-content: space-around;
align-items: flex-end;
}
.box {
position: relative;
width: 300px;
height: 300px;
display: flex;
justify-content: center;
align-items: center;
margin-top: 500px;
margin-left: 40px;
background: #141414;
transition: 0.5s;
font-family: consolas;
}
.box:hover {
height: 400px;
}
.box .imgBx {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
padding: 10px;
box-sizing: border-box;
}
.bio {
background: linear-gradient(235deg, #0c0c0c, #161616);
border-radius: 10px;
padding: 20px;
color: #fff;
font-size: 20px;
font-family: consolas;
max-width: 40%;
}
<!-- 语言：lang-html -->
<div class="aboutme">
<div class="box">
<div class="imgBx" id="aboutme">
<img src="me.jpg">
</div>
<div class="content">
<h2>Raul Souza<br><span>计算机科学家</span></h2>
</div>
</div>
<section class="bio">
..通用文本和图像..
</section>
</div>
<!-- 结束代码片段 -->
英文:
I have this box with a image and when mouse hover, the box grows to show a text. I'm having troubles with all other page elements moving together. position: absolute or fixed don't work. Is it possible to not move the page using only CSS? Sorry for english troubles.
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-css -->
.aboutme {
padding-top: 15%;
display: flex;
justify-content: space-around;
align-items: flex-end;
}
.box {
position: relative;
width: 300px;
height: 300px;
display: flex;
justify-content: center;
align-items: center;
margin-top: 500px;
margin-left: 40px;
background: #141414;
transition: 0.5s;
font-family: consolas;
}
.box:hover {
height: 400px;
}
.box .imgBx {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
padding: 10px;
box-sizing: border-box;
}
.bio {
background: linear-gradient(235deg, #0c0c0c, #161616);
border-radius: 10px;
padding: 20px;
color: #fff;
font-size: 20px;
font-family: consolas;
max-width: 40%;
}
<!-- language: lang-html -->
<div class="aboutme">
<div class="box">
<div class="imgBx" id="aboutme">
<img src="me.jpg">
</div>
<div class="content">
<h2>Raul Souza<br><span>Computer Scientist</span></h2>
</div>
</div>
<section class="bio">
..generic text and images..
</section>
</div>
<!-- end snippet -->
prints:
before move
and
after move
答案1
得分: 0
给.aboutme div固定高度并添加了悬停时显示文本的代码。
.aboutme {
height: 350px;
}
.box:hover {
height: 400px;
}
<div class="aboutme">
<div class="box">
<div class="imgBx" id="aboutme">
<img src="me.jpg">
</div>
<div class="content">
<h2>Raul Souza<br><span>Computer Scientist</span></h2>
</div>
</div>
<section class="bio">
..通用文本和图像..
</section>
</div>
英文:
Give a fixed height to the .aboutme div and I added code to show the text on hover.
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-css -->
.aboutme {
padding-top: 15%;
display: flex;
justify-content: space-between;
align-items: center;
height:350px;
background-color:#fff;
padding:25px;
}
.box {
position: relative;
width: 300px;
height: 300px;
display: flex;
justify-content: center;
align-items: center;
background: #141414;
transition: 0.5s;
font-family: consolas;
}
.box:hover {
height: 400px;
}
.box .imgBx {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
padding: 10px;
box-sizing: border-box;
}
.content{
display:none;
color:white;
}
.box:hover .content{
display:block;
}
.bio {
background: linear-gradient(235deg, #0c0c0c, #161616);
border-radius: 10px;
padding: 20px;
color: #fff;
font-size: 20px;
font-family: consolas;
max-width: 40%;
}
<!-- language: lang-html -->
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<div class="aboutme">
<div class="box">
<div class="imgBx" id="aboutme">
<img src="me.jpg">
</div>
<div class="content">
<h2>Raul Souza<br><span>Computer Scientist</span></h2>
</div>
</div>
<section class="bio">
..generic text and images..
</section>
</div>
</body>
</html>
<!-- end snippet -->
答案2
得分: 0
You can use transform: scaleY(...); instead of changing the height value on hover, in your case (300 to 400px height) that would be transform: scaleY(1.33);:
.aboutme {
padding-top: 15%;
display: flex;
justify-content: space-around;
align-items: flex-end;
}
.box {
position: relative;
width: 300px;
height: 300px;
display: flex;
justify-content: center;
align-items: center;
margin-top: 500px;
margin-left: 40px;
background: #141414;
transition: 0.5s;
font-family: consolas;
}
.box:hover {
transform: scaleY(1.33);
}
.box .imgBx {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
padding: 10px;
box-sizing: border-box;
}
.bio {
background: linear-gradient(235deg, #0c0c0c, #161616);
border-radius: 10px;
padding: 20px;
color: #fff;
font-size: 20px;
font-family: consolas;
max-width: 40%;
}
<div class="aboutme">
<div class="box">
<div class="imgBx" id="aboutme">
<img src="me.jpg">
</div>
<div class="content">
<h2>Raul Souza<br><span>Computer Scientist</span></h2>
</div>
</div>
<section class="bio">
..generic text and images..
</section>
</div>
英文:
You can use transform: scaleY(...); instead of changing the height value on hover, in your case (300 to 400px height) that would be transform: scaleY(1.33);:
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-css -->
.aboutme {
padding-top: 15%;
display: flex;
justify-content: space-around;
align-items: flex-end;
}
.box {
position: relative;
width: 300px;
height: 300px;
display: flex;
justify-content: center;
align-items: center;
margin-top: 500px;
margin-left: 40px;
background: #141414;
transition: 0.5s;
font-family: consolas;
}
.box:hover {
transform: scaleY(1.33);
}
.box .imgBx {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
padding: 10px;
box-sizing: border-box;
}
.bio {
background: linear-gradient(235deg, #0c0c0c, #161616);
border-radius: 10px;
padding: 20px;
color: #fff;
font-size: 20px;
font-family: consolas;
max-width: 40%;
}
<!-- language: lang-html -->
<div class="aboutme">
<div class="box">
<div class="imgBx" id="aboutme">
<img src="me.jpg">
</div>
<div class="content">
<h2>Raul Souza<br><span>Computer Scientist</span></h2>
</div>
</div>
<section class="bio">
..generic text and images..
</section>
</div>
<!-- end snippet -->
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论