Drongo_x17,
не самый лучший вариант, за лучшим к дизайнерам...
<!DOCTYPE html>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css">
.body-content {
min-height: 100%;
}
.content-wrap {
position: relative;
padding-bottom: 22em;
}
.description-wrap {
position: absolute;
bottom: 0;
left: 0;
z-index: 100;
border: 1px solid #ccc;
width: 500px;
margin: 0 0 30px 0;
border-radius: 15px;
padding: 15px;
}
.wrap-text {
display: none;
}
.more{
cursor: pointer;
text-decoration: underline;
color: #ff0000;
}
.more:hover{
text-decoration: none;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
$(function() {
$(".content-wrap").each(function(indx, el) {
var h = $(el).height(),
block = $(".wrap-text", el),
hh = $(".description-wrap", el).height();
$(".more", el).click(function(event) {
event.preventDefault();
var hide = block.is(":hidden"),
text = hide ? "Скрыть" : "Больше";
block.toggle(700, function() {
$(el).animate({
height: hide ? h + $(".description-wrap", el).height() - hh : h
}, 300)
});
$(this).text(text)
})
})
});
</script>
</head>
<body>
<div class="body-content">
<div class="content-wrap">
<div class="description-wrap">
<div class="wrap-text">
<p>……...</p>
<p>…………….</p>
</div>
<p><a class='more'>Больше</a></p>
</div>
</div>
<section id="block-slider">
……………………..
</section>
<section id="service">
…………………………………………………
</section>
<section id="portfolio">
…………………………
</section>
</div>
</body>
</html>