Rotate image by css, but crop it to be always same square - css

Question

I would like to have rotate and zoom efect on pictures here
http://cpband.itvp.eu/
, but i would like to keep them croped in the same box.
like here
http://cpband.itvp.eu/test.php
trick should be in
overflow: hidden;
, but I am not able to figureout how to make it work.
Thanks for the tips!

Answer 1

you may add the rotation to the container :
.pic {
overflow: hidden;
}
.grow img, .grow {
height: 300px;
width: 300px;
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-o-transition: all 1s ease;
-ms-transition: all 1s ease;
transition: all 1s ease;
}
.grow:hover {
transform:rotate(15deg);
}
.grow:hover img {
width: 400px;
height: 400px;
}
/* DEMO PURPOSE */
html {
height:100%;
display:flex;
align-items:center;
justify-content:center;
}
<div class="grow pic">
<img src="http://lorempixel.com/400/400/people/9" alt="portrait">
</div>
or is only to the image ? Also, transform can do both(zoom&rotate)
.pic {
overflow: hidden;
}
.grow img, .grow {
height: 300px;
width: 300px;
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-o-transition: all 1s ease;
-ms-transition: all 1s ease;
transition: all 1s ease;
}
.grow:hover img {
transform:rotate(15deg) scale(1.25);
}
/* DEMO PURPOSE */
html {
height:100%;
display:flex;
align-items:center;
justify-content:center;
}
<div class="grow pic">
<img src="http://lorempixel.com/400/400/people/9" alt="portrait">
</div>

Answer 2

Html:
<div id="container">
<img src="picture.jpg" id="picture" />
</div>
Css:
#container{
overflow:hidden;
width:100px;
height:100px;
}
#picture{
height:300px;
width:300px;
}