<!DOCTYPE HTML>
<html>
<head>
<title>Выпадающее меню</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<style type="text/css">
#wrapper{
width:500px;
overflow:hidden;
margin:50px auto 0 auto;
position:relative;
height:1000px;
}
#button {
width:250px;
margin:280px auto 0;
height:100px;
background-image:linear-gradient(to bottom,#79c7f3 0% , #2faef7 100%);
border-radius:15px;
cursor:pointer;
}
#button p{
text-align:center;
text-transform:uppercase;
line-height:100px;
color:#fff;
font-weight:bold;
}
.capture{
position:absolute;
top:0;
left:0;
width:0;
height:0;
}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('#button').click(function(){
$('#button p').text('Трансформируюсь...');
$('#button').fadeOut(2000);
$('#wrapper img').animate({'width':'500px','height':'659px'},2000);
});
$('img').click(function(){
$('#button p').text('Нажми меня');
$('#button').fadeIn(2000);
$('#wrapper img').fadeOut(2000);
});
});
</script>
</head>
<body>
<div id="wrapper">
<div id="button">
<p>Нажми меня</p>
</div>
<img class = "capture" src="http://f1life.ru/img/img/news/monza_2014_vettel.jpg" alt="">
</div>
</body>
</html>