Sikander Sikander - 6 months ago 87
HTML Question

css: make div stand out

i want to get look as in attached image

enter image description here

you can see centered div looks like its in focus and rest of the two are looking different

i am using bootstrap this is for making blocks

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


this gives them look like you see in attached image but my problem is that how do i add it focused view as its in picture (one of the blocks is zoomed in and rest seem to be in background )

Need your help please

Answer

You could use transform property to give it a zoomed effect:

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

see full page effect