jquery image hover + visible

arkadaşlar yapmak istediğim tam olarak div içindeki resmin üzerine geldiğinde yani hover olayı gerçekleştiğinde resim büyüyecek yavaş şekilde ben bunu cssde

height: 275px;
width: 212px;
transition-duration: 0.3s;
-webkit-transition-duration: 0.3s;

şu şekilde yaptım büyükdükten sonrada resmin üzerine yeni bir div açılacak divin üstüne button eklemek istiyorum. Örnek olarak BURADA verilen örnek verebilirim fakat burada sadece text girebiliyorum a href giremiyorum link vermek istiyorum ben buraya anlatmak istediğimi umarım anlatmışımdır .

yardımcı olacak arkadaşlara teşekkürler

css display: none,block la yapmanı öneririm js ye gerek kalmadan işini görür... geçişkenliğinide

-webkit-transition: background 0.5s ease-out 0s, color 0.05s ease-out 0s;
-moz-transition: background 0.5s ease-out 0s, color 0.05s ease-out 0s;
-o-transition: background 0.5s ease-out 0s, color 0.05s ease-out 0s;
-ms-transition: background 0.5s ease-out 0s, color 0.05s ease-out 0s;
transition: background 0.5s ease-out 0s, color 0.05s ease-out 0s;

bu kodları kullanarak yapabilirsin... (ben bu kodu reset.css de kullanıyorum bütün siteyi kapasıycak çekilde)
inşallah faydalı olur... Allah kolaylık versin...

teşekkürler hocam.

Eğer istersen jquery olarak ta şöyle birşey olabilir.

Demo => http://maskedpirate.net/demos/exmp.php

Yazı veya İstediğin herhangi bir kod buraya.

<script></script>
<script>
(function(){
var div = $('#box');
div.hover(
function(){
div.animate({
width: '400px',
height: '400px'
});
div.find('img').animate({
width: '400px',
height: '400px'
});
div.find('img').fadeOut(500);
},
function(){
div.animate({
width: '200',
height: '200'
});
div.find('img').animate({
width: '200',
height: '200'
});
div.find('img').fadeIn(500);
});
})();
</script>