2023年5月25日 23:23:37go评论72阅读模式

英文:

How can I prevent other elements from moving when an element grows in size on hover in CSS?

问题

&lt;!-- 开始代码片段：js 隐藏：false 控制台：true Babel：false --&gt;

&lt;!-- 语言：lang-css --&gt;

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

&lt;!-- 语言：lang-html --&gt;

    &lt;div class=&quot;aboutme&quot;&gt;
      &lt;div class=&quot;box&quot;&gt;
        &lt;div class=&quot;imgBx&quot; id=&quot;aboutme&quot;&gt;
          &lt;img src=&quot;me.jpg&quot;&gt;
        &lt;/div&gt;
        &lt;div class=&quot;content&quot;&gt;
          &lt;h2&gt;Raul Souza&lt;br&gt;&lt;span&gt;计算机科学家&lt;/span&gt;&lt;/h2&gt;
        &lt;/div&gt;
      &lt;/div&gt;
      &lt;section class=&quot;bio&quot;&gt;
        ..通用文本和图像..
      &lt;/section&gt;
    &lt;/div&gt;

&lt;!-- 结束代码片段 --&gt;

英文:

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.

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

&lt;div class=&quot;aboutme&quot;&gt;
  &lt;div class=&quot;box&quot;&gt;
    &lt;div class=&quot;imgBx&quot; id=&quot;aboutme&quot;&gt;
      &lt;img src=&quot;me.jpg&quot;&gt;
    &lt;/div&gt;
    &lt;div class=&quot;content&quot;&gt;
      &lt;h2&gt;Raul Souza&lt;br&gt;&lt;span&gt;Computer Scientist&lt;/span&gt;&lt;/h2&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  &lt;section class=&quot;bio&quot;&gt;
    ..generic text and images..
  &lt;/section&gt;
&lt;/div&gt;

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.

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

&lt;!DOCTYPE html&gt;
&lt;html&gt;
    &lt;head&gt;
        &lt;title&gt;Page Title&lt;/title&gt;
    &lt;/head&gt;
    &lt;body&gt;
        &lt;div class=&quot;aboutme&quot;&gt;
        &lt;div class=&quot;box&quot;&gt;
            &lt;div class=&quot;imgBx&quot; id=&quot;aboutme&quot;&gt;
                &lt;img src=&quot;me.jpg&quot;&gt;
            &lt;/div&gt;
            &lt;div class=&quot;content&quot;&gt;
                &lt;h2&gt;Raul Souza&lt;br&gt;&lt;span&gt;Computer Scientist&lt;/span&gt;&lt;/h2&gt;
            &lt;/div&gt;
        &lt;/div&gt;
        &lt;section class=&quot;bio&quot;&gt;
            ..generic text and images..
        &lt;/section&gt;
    &lt;/div&gt;
    &lt;/body&gt;
&lt;/html&gt;

答案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);:

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

&lt;div class=&quot;aboutme&quot;&gt;
  &lt;div class=&quot;box&quot;&gt;
    &lt;div class=&quot;imgBx&quot; id=&quot;aboutme&quot;&gt;
      &lt;img src=&quot;me.jpg&quot;&gt;
    &lt;/div&gt;
    &lt;div class=&quot;content&quot;&gt;
      &lt;h2&gt;Raul Souza&lt;br&gt;&lt;span&gt;Computer Scientist&lt;/span&gt;&lt;/h2&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  &lt;section class=&quot;bio&quot;&gt;
    ..generic text and images..
  &lt;/section&gt;
&lt;/div&gt;

通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。

如何在CSS中实现鼠标悬停时防止元素变大时影响其他元素的位置？

问题

答案1

答案2

我要翻译的内容：如何在我的网站上添加具有渐变边框的按钮？

将 Mui 卡片操作对齐到右上角

禁用空的


确定

问题

答案1

答案2

我要翻译的内容： 如何在我的网站上添加具有渐变边框的按钮？

将 Mui 卡片操作对齐到右上角

我要翻译的内容：如何在我的网站上添加具有渐变边框的按钮？