Coriolan161,
<!DOCTYPE HTML>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css">
.capabilitySection-block{
height: 80px;
float: left;
width: 200px;
background-image: url(http://javascript.ru/forum/images/ca_serenity/misc/logo.gif);
background-repeat: no-repeat;
background-size: 100% 100%;
}
.capabilitySection-label{
padding-top: 120px;
}
.capabilitySection-comment{
opacity:0;
}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script>
$(function() {
var arr = ['url(http://javascript.ru/forum/images/smilies/sad.gif)',
'url(http://javascript.ru/forum/images/smilies/cray.gif)',
'url(http://javascript.ru/forum/images/smilies/dance3.gif)'];
$('.capabilitySection-block').on({
mouseenter: function() {
$('.capabilitySection-label', this).stop(true, true).animate({
paddingTop: '0px'
}, 'slow');
$(this).css('backgroundImage', 'none');
$('.capabilitySection-comment', this).stop(true, true).animate({
opacity: '1'
}, 'slow');
},
mouseleave: function() {
$('.capabilitySection-label', this).stop(true, true).animate({
paddingTop: '120px'
}, 'slow');
var i = $('.capabilitySection-block').index(this);
$(this).css('backgroundImage', arr[i]);
$('.capabilitySection-comment', this).stop(true, true).animate({
opacity: '0'
}, 'slow');
}
});
});
</script>
</head>
<body>
<div class="capabilitySection">
<div class="capabilitySection-block">
<p class="capabilitySection-comment">Появляющийся коммент</p>
<p class="capabilitySection-label">Подпись</p>
</div>
<div class="capabilitySection-block">
<p class="capabilitySection-comment">Появляющийся коммент</p>
<p class="capabilitySection-label">Подпись</p>
</div>
<div class="capabilitySection-block">
<p class="capabilitySection-comment">Появляющийся коммент</p>
<p class="capabilitySection-label">Подпись</p>
</div>
<!--..... и таких блоков (capabilitySection-block)ещё пятеро-->
</div>
</body>
</html>