How to make an image grow inside its container to create a zoom effect?

Question

http://darrenbachan.com/

I try to do this when im hovering over the project. I tried using this:

.grow { transition: all .2s ease-in-out; } .grow:hover { transform: scale(1.1); } 

But when I put it on, the whole container will grow. I even tried to put a class growing in the gap that contains the image, but it does the same.

Then I tried:

 .grow { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; -webkit-transition: all 2s ease; -moz-transition: all 2s ease; -o-transition: all 2s ease; -ms-transition: all 2s ease; transition: all 2s ease; } .grow:hover { /*transform: scale(1.1);*/ background-size: 150%; overflow: hidden; } 

But that will not work either. It scales the background in the upper left corner and does not weaken.

How can I change the code to achieve the zoom effect I'm looking for?

Answer 1

If I understand you correctly, your images seem to do what you want them to do, if you don't want to zoom in, in this case you want to adjust the background size:

 .grow:hover { background-size: 130% 130%; opacity:1.0; } 

or to the zoom level of your choice