Question

我正在尝试在鼠标悬停时创建响应式3盒装布局放大/缩小，但不能。

示例：https://www.americaneagle.com/

在下面的美国鹰网站主页幻灯片中，我们可以找到上面的例子。

请提供任何示例或链接。

Answer 1

对于初学者，你可以尝试这样..但不要指望别人写你的代码..

先尝试自己，然后在此处询问具体的疑问和说明。：）

＆＃13;

* {
  box-sizing: border-box;
}

body {
  margin-top: 100px;
}

.grid:after,
.grid:before {
  display: 'table' content:'';
}

.col {
  float: left;
  width: 33%;
  padding: 0px 10px;
}

.block {
  background-color: #eee;
  border: 1px solid #ddd;
  transform: scale(1);
  transition: all 0.3s ease;
  height: 200px;
  z-index: 1;
  position: relative;
}

.block:hover {
  transform: scale(1.5);
  z-index: 10;
}

.block-hidden {
  display: none;
  text-align: center;
  padding: 20px;
}

.block:hover .block-hidden {
  display: block;
}

＆＃13;

<div class="grid">
  <div class="col">
    <div class="block">
      <div class="block-hidden">
        Hidden Content
      </div>
    </div>
  </div>
  <div class="col">
    <div class="block">
      <div class="block-hidden">
        Hidden Content
      </div>
    </div>
  </div>
  <div class="col">
    <div class="block">
      <div class="block-hidden">
        Hidden Content
      </div>
    </div>
  </div>
</div>

＆＃13;

Answer 2

每个框都可以使用bootstrap col进行响应 col-lg-4 col-md-4 col-sm-4 col-xs-12 要么 col-lg-4 col-md-4 col-sm-6 col-xs-12

响应3盒装布局放大/缩小鼠标悬停

2 个答案: