CSS：如何使div更加突出？

Question

我希望能够让我的页面看起来像附图所示。

你可以看到中心的div看起来更加突出，而其他两个则不同。

我正在使用Bootstrap来制作这些块。

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


#about-blocks {
    margin-top:20px;
}
#about-blocks h2 {
    font-size: 16px;
    font-weight: bold;
    margin-top:10px;
}
.round-corner {
    display: block;
    margin-left: auto;
    margin-right: auto;
    width: 100px;
    height: 100px;
    border-radius: 50%;
    background: #1D7AB7;
    margin-top: -53px;
    padding-top: 36px;
    font-weight: bold;
}

这会使它们看起来像您在附加的图片中看到的样子，但我的问题是如何添加聚焦视图，就像图片中显示的那样（其中一个块被放大，而其余的块似乎在背景中）。

请帮我解决这个问题。

- Sikander

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>

查看完整页面效果

- kasperoo