Having a fluid grid with 3 blocks in one row, each set to width:33.3%. The images within these blocks are set to width: 100% and height: auto. I am looking to implement a zoom-in effect on hover for these images without changing the height of the blocks. I have shared my code snippet below.
Any suggestions on how to achieve this?
.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>