Question

我想看看作爲附加的圖像

你可以看到中心DIV看起來像它的重點和兩個休息正在尋找不同的

我現在用的引導，這是製作塊

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

這讓他們看起來像你附加的圖像看到，但我的問題是，如何增加它的重點編輯觀點作爲其在圖像（在被放大的區塊之一，其餘的似乎是在後臺）

需要你的幫助，請

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>

看到完整的頁面效果