Mouse over div and open larger

Question

Mouse over div and open larger

Navigation

#1 by (7 votes)

1

I want to hover over a div , that same div is magnified, as in the image below:

I have a multi-element list, when I hover over the element ( div ), it would be over the top and would have an effect (maybe transition from css3).

Any tips?

html jquery css css3

asked by anonymous 27.01.2016 / 16:53

1 answer

Why does the download attribute not work? Return value SetInterval

score 7 · Accepted Answer

So you mean?

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>