Zoom Effect on DIV

Question

I need to do an effect like this page http://www.kanui.com.br/roupas-femininas/blusas/ .

When you hover over the product (DIV) it gives a zoom effect and raised.

I tried to do so:

HTML

<div class="row">

<div class="col-md-3 classe">

<img src="imagem.jpg" class="img-responsive">

<!-- INFORMAÇÕES -->
</div>
</div>

CSS

.classe:hover{
text-shadow: .....
}

I put to put a shadow as on the page but it did not help, it was "grotesque". Needed the same effect as the page. How could do ?

Answer 1

I didn’t notice any zoom, just the "raised" which is actually the box-shadow that causes this impression, are needed some things:

• box-shadow to cause the effect of highlighting the page or overwriting
• position: relative; so that the internal element using position: Absolute; does not leave the area
• I could have used the property zoom, but applying a simple width to the element with :Hover already does the effect
• The image is in with display: block to avoid the line-height affect the elements, margin: 0 auto; aligns block elements in the center.

I preferred to use the position: absolute; because only with relative or negative margins could affect the surrounding elements.

In a quick example it would be this:

div.item {
    position: relative;
    width: 200px;
    min-height: 400px;
}

div.item div.inner {
    border: 1px transparent solid;
    width: 100%;
    height: 400px;
    top: 0;
    left: 0;
}

div.item div.inner:hover {
    border-color: #a5a5a5;
    box-shadow: 8px 7px 0 -3px rgba(55,55,55,0.2);
    position: absolute;
    z-index: 20;
    width: 110%; /*ajusta a largura do zoom*/
}

div.item div.inner img {
    display: block;
    margin: 0 auto;
    width: 100%;
}

<div class="item">
    <div class="inner">
        <img src="http://i.stack.imgur.com/JW1Bu.jpg">
    </div>
</div>

You can also use Transition to cause a smooth effect, like this:

div.item {
    position: relative;
    width: 200px;
    min-height: 400px;
}

div.item div.inner {
    border: 1px transparent solid;
    width: 100%;
    height: 400px;
    top: 0;
    left: 0;
    transition: all .2s;
}

div.item div.inner:hover {
    border-color: #a5a5a5;
    box-shadow: 8px 7px 0 -3px rgba(55,55,55,0.2);
    position: absolute;
    z-index: 20;
    width: 110%; /*ajusta a largura do zoom*/
}

div.item div.inner img {
    display: block;
    margin: 0 auto;
    width: 100%;
}

<div class="item">
    <div class="inner">
        <img src="http://i.stack.imgur.com/JW1Bu.jpg">
    </div>
</div>