css：让div脱颖而出

Question

我希望看到附图中的

你可以看到居中的div看起来像焦点，其余的看起来不同

我正在使用bootstrap这是用于制作块

int

这让他们看起来就像你在附图中看到的那样但我的问题是我如何将其聚焦视图添加到图片中（其中一个块放大并且休息似乎在背景中）

需要你的帮助

Answer 1

您可以使用transform属性为其提供缩放效果：

#about-blocks {
  margin-top: 100px;
}
#about-blocks h2 {
  font-size: 16px;
  font-weight: bold;
  margin-top: 10px;
}
.round-corner {
  display: block;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
  width: 100px;
  height: 100px;
  border-radius: 50%;
  background: #1D7AB7;
  margin-top: -53px;
  padding-top: 36px;
  font-weight: bold;
}
@media only screen and (min-width: 768px) {
  #two {
    transform: scale(1.3) translateY(30px);
    background: #ababab;
    z-index: 1;
    box-shadow: 0 0 5px #bbb;
  }
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<div class="row" id="about-blocks">
  <div class="col-md-3 col-sm-3 col-xs-12 col-md-offset-1 col-sm-offset-1">
    <span class='round-corner'>Heading</span>
    <h2>Discover What's new</h2>
    <p>
      Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s,
    </p>
  </div>
  <div class="col-md-3 col-sm-3 col-xs-12" id='two'>
    <span class='round-corner'>Heading</span>
    <h2>Discover What's new</h2>
    <p>
      Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s,
    </p>
  </div>
  <div class="col-md-3 col-sm-3 col-xs-12">
    <span class='round-corner'>Heading</span>
    <h2>Discover What's new</h2>
    <p>
      Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s,
    </p>
  </div>
</div>

查看整页效果