css: make div

Question

i wie in der beigefügten Bild sehen wollen abheben

Sie zentriert div im Fokus und der Rest der beiden wie ihre verschiedenen suchen

Looks sehen kann ich Bootstrap dieses verwende ist für die Herstellung von Blöcken

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

das gibt ihnen aussehen wie Sie in der beigefügten Bild zu sehen, aber mein Problem ist, dass, wie füge ich es Fokus ed Ansicht als in Bild (einer der Blöcke wird vergrößert und Ruhe scheinen im Hintergrund zu sein)

brauchen Ihre Hilfe bitte

Answer 1

Sie transform Eigenschaft verwenden, könnte es eine gezoomte Wirkung zu verleihen:

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

siehe vollständige Seite Effekt