Maintain Padding When Scaling Image Inside Fixed Size Container

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 t

Solution 1:

I've transfered the transition to the frame (when the frame gets hovered, the transition kicks in).

Working Fiddle

HTML: (another div added)

<divclass="videoframe"><div><imgsrc="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;
}
.videoframediv
{
    border-radius: 20px;
    width: 100%;
    height: 100%;
    overflow: hidden;
}
.videoframeimg
{

    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:hoverimg
{
    width: 300px;
    height: 168px;
}

Solution 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.