CSS: сделать DIV выделиться

Question

я хочу, чтобы выглядеть, как в прилагаемом изображении

вы можете увидеть в центре ДИВ выглядит как его в фокусе и остальной части двух смотрят другую

я Я использую самозагрузки это для изготовления блоков

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

см полных страницы эффект