Zoom effect in DIV

Question

Zoom effect in DIV

Navigation

#1 by (2 votes)

0

I need to make a similar effect to this page link .

When you hover over the product (DIV) it has a zoomed effect and raised.

I tried to do this:

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 in the page but it did not help, it was "grotesque". It needed the same effect as the page. How could I do it?

html html5 css css3 zoom

asked by anonymous 10.05.2016 / 21:25

1 answer

List Adapter Duplicating Positions in ListView is it possible to two submit a button?

score 2 · Accepted Answer

I did not notice any zoom, just the "raised" that in fact is the box-shadow that causes this impression, it takes some things:

box-shadow to cause the page's highlight or overlap effect
position: relative; so that the inner element that uses position: absolute; do not leave the area
I could have used the property zoom , but apply a simple width on the element with: hover already does the effect
The image is in display: block to avoid line-height affect elements, margin: 0 auto; aligns block elements in the center.

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

In a quick example 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>

Youcanalsousetransitiontocauseasmootheffect,likethis:

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>