Faulty image-hover effect - html

Question

I have four equally sized images, all set to 20% width of the page
<div class="portrait">
<img src="#">
</div>
<div class="portrait">
<img src="#">
</div>
<div class="portrait">
<img src="#">
</div>
<div class="portrait">
<img src="#">
</div>
in my website that are horizontally aligned. On hover, I want the image to zoom inside the original border (like this https://codepen.io/math2001/pen/zZXBbj?editors=1100), which I did by a CSS3 transition and overflow: hidden.
.portrait {
float: left;
width: 20%;
overflow: hidden;
}
.portrait img {
width: 100%;
transition: transform 0.2s linear;
}
.portrait img:hover {
transform: scale(1.1);
}
The width of the image does not overflow past the original 20% constraint of the portrait, but the height does. I know the problem is that there is no fixed constraint for the height of the wrapper divs, but I don't know how to create one, since everything is percentage scaled. How can I fix this?

Answer 1

Put the transform on the container rather than the image:
.portrait {
float:left;
width:20%;
overflow:hidden;
transition:transform 0.2s linear;
}
.portrait img {
width:100%;
}
.portrait:hover {
transform: scale(1.1);
}
<div class="portrait">
<img src="http://placehold.it/250x250">
</div>
<div class="portrait">
<img src="http://placehold.it/250x250/000/ccc">
</div>
<div class="portrait">
<img src="http://placehold.it/250x250/aaa/eee">
</div>
<div class="portrait">
<img src="http://placehold.it/250x250/ccc/fff">
</div>

Answer 2

Did you try to use bigger definition for scale. For example:
.portrait:hover img {
transform: scale(1.4);
}

Answer 3

You need to set the img to display:block;
.portrait {
float: left;
width: 20%;
overflow: hidden;
}
.portrait img {
display: block; /* added property */
width: 100%;
transition: transform 0.2s linear;
}
.portrait:hover img {
transform: scale(1.4);
}
<div class="portrait">
<img src="http://placehold.it/250/f99">
</div>