Alexander Seredenko Alexander Seredenko - 4 months ago 8
CSS Question

How to add image zoom-in effect to block without fixed size?

I have fluid grid: 3 blocks in one row with

width:33.3%
. Images witch contain in this block have
width: 100%
and
height: auto
. I want to add zoom-in effect on hover for this images. But I have no ideas how to do it with fluid grid and without changing blocks height. You can see my code snippet below.

Any ideas how to solve it?



.split.third {
width: 33.3%;
display: block;
float: left;
overflow: hidden;
}
.split.third img {
width: 100%;
height: auto;
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-o-transition: all 1s ease;
-ms-transition: all 1s ease;
transition: all 1s ease;
}
.split.third:hover img {
width: 120%;
}

<div class="split-wrap">
<div class="split third">
<div class="cover">
<img src="http://cs5-3.4pda.to/5290239.png" />
</div>
</div>

<div class="split third">
<div class="cover">
<img src="http://cs5-3.4pda.to/5290239.png" />
</div>
</div>

<div class="split third">
<div class="cover">
<img src="http://cs5-3.4pda.to/5290239.png" />
</div>
</div>
</div>




Answer

Use transform: scale(1.2).

.split.third {
    width: 33.3%;
    display: block;
    float: left;
    overflow: hidden;
}
.split.third img {
    width: 100%;
    height: auto;
    -webkit-transition: -webkit-transform 1s ease;
            transition: -webkit-transform 1s ease;
            transition: transform 1s ease;
            transition: transform 1s ease, -webkit-transform 1s ease;
}
.split.third:hover img {
    -webkit-transform: scale(1.2);
            transform: scale(1.2);
}
<div class="split-wrap">
  <div class="split third">
    <div class="cover">
      <img src="http://cs5-3.4pda.to/5290239.png">
    </div>
  </div>
  <div class="split third">
    <div class="cover">
      <img src="http://cs5-3.4pda.to/5290239.png">
    </div>
  </div>
  <div class="split third">
    <div class="cover">
      <img src="http://cs5-3.4pda.to/5290239.png">
    </div>
  </div>
</div>

Comments