Maintain padding when scaling image inside fixed size container - html

Question

I'm trying to create a zoom effect by using CSS transition to grow an image inside a fixed size container on hover. The container frame has a border and padding, and I would like them to stay when the image grows. The problem is that when it grows, the padding on the right and bottom disappear.
Here is the CSS code:
.videoframe {
width: 200px;
height: 113px;
border: solid 2px;
border-radius: 20px;
margin-right: 20px;
margin-bottom: 20px;
padding: 10px;
overflow: hidden;
}
.videoframe img {
border-radius: 20px;
width: 200px;
height: 113px;
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-o-transition: all 1s ease;
-ms-transition: all 1s ease;
transition: all 1s ease;
}
.videoframe img:hover {
width: 300px;
height: 168px;
overflow: hidden;
}
And here the HTML code:
<div class="videoframe"> <img src="image.jpg" /> </div>
Is there any way to maintain the 10px padding all the way around the image when it changes size?

Answer 1

I've transfered the transition to the frame (when the frame gets hovered, the transition kicks in).
Working Fiddle
HTML: (another div added)
<div class="videoframe">
<div>
<img src="http://www.ac4bf-thewatch.com/initiates/upload/20130909/big_522e1c989c94f.jpg">
<div>
</div>
CSS
.videoframe
{
width: 200px;
height: 113px;
border: 2px solid black;
border-radius: 20px;
margin-right: 20px;
margin-bottom: 20px;
padding: 10px;
}
.videoframe div
{
border-radius: 20px;
width: 100%;
height: 100%;
overflow: hidden;
}
.videoframe img
{
width: 100%;
height: 100%;
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-o-transition: all 1s ease;
-ms-transition: all 1s ease;
transition: all 1s ease;
}
.videoframe:hover img
{
width: 300px;
height: 168px;
}

Answer 2

sorry I'm a little bit confused, do you want the parent container to expand with the image?
if so please see http://jsfiddle.net/NcaAA/
you can use
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
with
padding:10px;
to keep consistent padding that takes into account the total width and height you want.