Siend,
<!DOCTYPE HTML>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css">
.GarantAnimatedBlock {
float: left;
margin: 15px;
}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script>
$(function(){
$(".GarantAnimatedBlock").each(function(index, element) {
$(element).on( {mouseenter :
function(e){
$(this).find(".GarantAnimatedBlockText").animate({"height":"100%"},300,function(){
$(this).find(".GarantAnimatedBlockTextHidden").css({"display":"inline-block"}).animate({"opacity":"1"},300)
})
},
mouseleave :function(e){
$(this).find(".GarantAnimatedBlockTextHidden").css({"display":"none","opacity":"0"})
$(this).find(".GarantAnimatedBlockText").each(function(index, element) {
$(element).animate({"height":$(this).find(".GarantAnimatedBlockTextShow").outerHeight(true)+"px"},300)
});
}})
$(element).mouseleave() //вместо css
});
});
</script>
</head>
<body>
<div class="GarantAnimatedBlock">
<img src="someimg.png">
<div class="GarantAnimatedBlockText">
<span class="GarantAnimatedBlockTextShow">
<p>sometext</p></span>
<span class="GarantAnimatedBlockTextHidden">
<p>sometext.</p>
<p>sometext</p></span>
</div>
</div>
<div class="GarantAnimatedBlock">
<img src="someimg.png">
<div class="GarantAnimatedBlockText">
<span class="GarantAnimatedBlockTextShow">
<p>sometext</p></span>
<span class="GarantAnimatedBlockTextHidden">
<p>sometext.</p>
<p>sometext</p></span>
</div>
</div>
<div class="GarantAnimatedBlock">
<img src="someimg.png">
<div class="GarantAnimatedBlockText">
<span class="GarantAnimatedBlockTextShow">
<p>sometext</p></span>
<span class="GarantAnimatedBlockTextHidden">
<p>sometext.</p>
<p>sometext</p></span>
</div>
</div>
</body>
</html>