我希望能够让我的页面看起来像附图所示。
你可以看到中心的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;
}
这会使它们看起来像您在附加的图片中看到的样子,但我的问题是如何添加聚焦视图,就像图片中显示的那样(其中一个块被放大,而其余的块似乎在背景中)。
请帮我解决这个问题。