Hover over div and open larger

Question

I wish that when passing the mouse over a div, that same div be enlarged, as in the image below:

I have a list with several elements, when pass the mouse over the element (div), she would stand on top right in the center and open an effect (perhaps css3 Transition).

Any hint?

Answer 1

So you refer to ?

div.content {
  position: relative;
  padding: 20px;
  width: 880px;
}
div.blocos {
  width: 200px;
  height: 200px;
  margin: 5px;
  float: left;
  border: 1px solid black;
  cursor: pointer;
  background-color: #C7C7C7;
  position: relative;
}

div.o{
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
  width: 150px;
  height: 150px;
  background-color: #F7F7F7;
  transition: all 0.4s ease-in;
}
div.blocos:nth-child(2n+2) {
  background-color: #000;
}
div.blocos:hover div.o{
  transform: scale(1.8);
  -webkit-transform: scale(1.5);
  -moz-transform: scale(1.5);
  -o-transform: scale(1.5);
  z-index: 2;
  background-color: rgba(0,0,0,0.7);
}

<div class="content">
  <div class="blocos">
  <div class="o"></div>
  </div>
  <div class="blocos">
<div class="o"></div>
  </div>
  <div class="blocos">
<div class="o"></div>
  </div>
  <div class="blocos">
<div class="o"></div>
  </div>
  <div class="blocos">
<div class="o"></div>
  </div>
</div>