尝试使 div 个框展开

Question

目前我正在尝试创建 nextflix 克隆。我的问题是，当我将鼠标悬停在一个电影框上时，它会展开，但也会将其他电影框向下推，并且只会向一个方向展开。不知道如何解决这个问题。提前致谢。

html

    <div class="wrapper">
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
</div>

css

*{
  margin: 0;
  padding: 0;
}
.wrapper{
  height: 400px;
  width: 100%;
  background-color: black;
  position: absolute;
}

.box{
  height: 100px;
  width: 100px;
  background-color: blue;
  margin-top: 50px;
  margin-bottom: 50px;
  display: inline-block;
  transition: .5s;
}

.box:hover{  
  height: 200px;
  width: 200px;
}

https://codepen.io/shauneb/pen/Epoxrx //我面临的问题示例

Answer 1

您只需在 .box class 中添加 vertical-align:top css 即可。

Answer 2

如果你只想在一个方向（垂直）推动它，你只需要改变元素的高度而不是宽度，而且使用 display: inline-block 也会导致推动其他元素。

所以你的风格应该是：

.box{
  height: 100px;
  width: 100px;
  background-color: blue;
  margin-top: 50px;
  margin-bottom: 50px;
  display: block;
  float: left;
  margin-left: 10px;
  transition: .5s;
}

.box:hover{
  height: 200px;
}

Answer 3

将此样式用于 .box

.box{
    height: 100px;
    width: 100px;
    background-color: blue;
    display: block;
    transition: .5s;
    float: left;
    margin: 50px 0px 50px 10px;
}

如果您使用这种悬停效果，您将获得以下输出：

.box:hover{  
  height: 200px;
  width: 200px;
}

如果您使用这种悬停效果，您将获得以下输出：

.box:hover{  
   transform: scale(1.3);
}

Answer 4

我刚刚用 transform: scale(2); 替换了你的过渡并使用 vertical-align:middle;

将框居中对齐

希望这可能有用。

*{
  margin: 0;
  padding: 0;
}
.wrapper{
  height: 400px;
  width: 100%;
  background-color: black;
  position: absolute;
}

.box{
  height: 100px;
  width: 100px;
  background-color: blue;
  margin-top: 50px;
  text-align:center;
  margin-bottom: 50px;
/*   position: absolute; */
  display: inline-block;
  transition:transform .5s ease;
  vertical-align: middle;
}

.box:hover{
  
 transform: scale(2); 
  margin-top: 50px;
  margin-bottom: 50px;
}

<div class="wrapper">
  <div class="box">Movie 1</div>
  <div class="box">Movie 2</div>
  <div class="box">Movie 3</div>
  <div class="box">Movie 4</div>
</div>

Answer 5

我不知道这是否是您想要的，但是您可以使用 css 修改块的大小，而无需使用 transform: scale(2); 移动其兄弟块；在悬停 css。

缩放会根据查看器调整元素的大小，但元素的 "volume" 保持不变，因此它不会移动另一个 div

使用比例修改您的示例：

*{
  margin: 0;
  padding: 0;
}
.wrapper{
  height: 400px;
  width: 100%;
  background-color: black;
  position: absolute;
}

.box{
  position: relative;
  height: 100px;
  width: 100px;
  background-color: blue;
  margin-top: 50px;
  margin-bottom: 50px;
/*   position: absolute; */
  display: inline-block;
  transition: .5s;
}

.box:hover{
  z-index: 1;
  transform: scale(2);
}

<div class="wrapper">
  <div class="box"></div>
  <div class="box" style="background-color: green"></div>
  <div class="box" style="background-color: violet"></div>
  <div class="box"  style="background-color: red"></div>
</div>

注意：我还添加了一个位置：相对于框和一个 z-index 以确保您悬停的元素始终位于其他元素的顶部。

https://codepen.io/ancode/pen/pZpJRN

尝试使 div 个框展开

Trying to make div boxes expand

html

css

hover

expand

netflix