CSS expanding image

Say I had a 500px wide by 200px high box with an image, and when you hover over it it expands into the full image. How would I do that?

 

Pure CSS

<div id="mov"></div>

HTML:

#mov {
    background: url("small.png") no-repeat scroll center top transparent;
    height: 250px;
    width: 250px;
}
#mov:hover {
    background-image: url("big.png");
    height: 500px;
    width: 500px;
}

Code (markup):

 

thank you for the information, I am still learning and this seems like it would be something straight forward XD. My one question is what does scroll do?

 

The "scroll" value is the default value for background (meaning you don't need to define it).

What it does - It declares whether the background should scroll with the rest of the page.

The other value would be be fixed, so it wont scroll...

 

so if i were to add the scroll would this make the image retract back up slowly? based on this code

#mov {
background: url(pics/small.png) no-repeat scroll center top transparent;
height: 250px;
width: 2560px;
-webkit-transition: background .5s ease;
-moz-transition: background .5s ease;
-ms-transition: background .5s ease;
-o-transition: background .5s ease;
transition: background .5s ease;
}
#mov:hover {
background-image: url(pics/big.png);
height: 1600px;
width: 2560px;
}

 

Never worked with transition, but what exactly do you mean with "retract back slowly"?

Did a bit of testing, and I think I have something that might be exactly what you want. If not, describe it again.

#mov {
    background: url("small.png") no-repeat scroll center top transparent;
    height: 250px;
    width: 250px;
    transition: height 0.5s ease 0s, width 0.5s ease 0s;
    -moz-transition: height 0.5s ease 0s, width 0.5s ease 0s;
    -ms-transition: height 0.5s ease 0s, width 0.5s ease 0s;
    -o-transition: height 0.5s ease 0s, width 0.5s ease 0s;
    -webkit-transition: height 0.5s ease 0s, width 0.5s ease 0s;
}
#mov:hover {
    background-image: url("big.png");
    height: 500px;
    width: 500px;
}

Code (markup):

Quick breakdown
transition: ##What changes## ##How fast is the change## ##I have no Idea what ease does## ##Delay##

More info about css3 transition

http://www.w3.org/TR/css3-transitions/

Code (markup):