マウスオーバーしたときに画像を拡大・縮小する方法です。これを実現するにはCSS3の「transform:scale()」を利用します。
CSSだけで簡単にアニメーションが作れるので便利です。

ソース

<div class="sample01">
<img src="http://www.example.com/images/sunset01.jpg">
</div>

<div class="sample02">
<img src="http://www.example.com/images/sunset01.jpg">
</div>

<style type="text/css">

.sample01 {
    width:360px;
    height:240px;
    overflow:hidden;
}

.sample01 img{
    -webkit-transition: -webkit-transform 0.6s linear;
    -moz-transition: -moz-transform 0.6s linear;
    -o-transition: -o-transform 0.6s linear;
    -ms-transition: -ms-transform 0.6s linear;
    transition: transform 0.6s linear;
}

.sample01 img:hover{
    -webkit-transform: scale(1.5);
    -moz-transform: scale(1.5);
    -o-transform: scale(1.5);
    -ms-transform: scale(1.5);
    transform: scale(1.5);
}

.sample02 {
    width:360px;
    height:240px;
    overflow:hidden;
}

.sample02 img{
    -webkit-transition: -webkit-transform 0.6s linear;
    -moz-transition: -moz-transform 0.6s linear;
    -o-transition: -o-transform 0.6s linear;
    -ms-transition: -ms-transform 0.6s linear;
    transition: transform 0.6s linear;
}

.sample02 img:hover{
    -webkit-transform: scale(0.5);
    -moz-transform: scale(0.5);
    -o-transform: scale(0.5);
    -ms-transform: scale(0.5);
    transform: scale(0.5);
}

</style>

※「-webkit-transition: -webkit-transform 0.6s linear;」は変化のタイミング・進行割合を指定しています。
参考「transition-timing-function | HTMLリファレンス」

実行結果

拡大（sample01）

縮小（sample02）