javascript - 响应式 3 盒装布局在鼠标悬停时放大/缩小

Question

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

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

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

请提出任何示例或链接。

标签： javascripthtmlcss

Answer 1

对于初学者，您可以尝试这样..但不要指望其他人编写您的代码..

首先尝试自己，然后在此处询问具体的疑问和澄清。:)

* {
  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;
}

<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>