Witam,

Próbuję osiągnąć następujący efekt: Na środku strony wyświetlają się dwa zdjęcia etap1: http://prntscr.com/3isy3z etap2: http://prntscr.com/3isy7h
Po najechaniu myszką zmienia się wielkość zdjęcia odsłaniając tekst. Z etapu pierwszego wielkość zmienia sie w lewą stronę, a z etapu drugiego w prawą.

Mój dotychczasowy kod:

<!doctype html>
<html lang="pl">
<head>
<meta charset="utf-8">
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
</head>
<body>
<style>
#etap1{
	float:left;
}
</style>
<div id="etapy">
	<div id="etap1" class="blocks">
    	       <div style="width: 380px; display: block; overflow: hidden;"><img src="ei.jpg" /></div>
	</div>
	<div id="etap2" class="blocks">
    	       <div style="width: 380px; display: block; overflow: hidden;"><img src="eii.jpg" /></div>
	</div>
</div>
<script type="text/javascript">
$("#etap1 div").hover(function(){
    $(this).stop(true, false).animate({ width: "960px" });
}, function() {
    $(this).stop(true, false).animate({ width: "380px" });
});
</script>
<script type="text/javascript">
$("#etap2 div").hover(function(){
    $(this).stop(true, false).animate({width: 960});
}, function() {
    $(this).stop(true, false).animate({width: 380});
});
</script>
</body>
</html>