Expandable div

by Yaroslav Samardak

HTML

<div class="info">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed dictum sem ultricies diam venenatis interdum. Cras luctus purus ac ipsum malesuada, vitae luctus elit ultricies. Morbi neque diam, pretium cursus tortor vel, porttitor ullamcorper nunc. Pellentesque non tristique libero. Duis quis purus eros. Nulla faucibus ligula in nulla ultricies, viverra suscipit nunc tempor. Nunc eleifend tellus nisi, nec accumsan urna gravida a. Donec ac est quis urna scelerisque vulputate a non ante. Etiam ut magna enim. Integer finibus, libero at lobortis congue, urna ante tempus massa, sed mattis quam leo vel risus. Morbi condimentum, ligula ultricies vestibulum vestibulum, nisi ligula tincidunt neque, vitae scelerisque tellus sem nec arcu.

Nunc vel nibh ipsum. Nam efficitur vulputate erat, at fringilla purus posuere vel. Curabitur sed urna eu lectus congue facilisis. Sed faucibus est leo, eu auctor nunc vulputate ac. Etiam condimentum ex vitae ipsum efficitur placerat. Mauris et tincidunt tortor. Suspendisse nisl metus, efficitur eu magna non, mollis cursus nisl. Cras vitae finibus massa. Ut consequat auctor erat, at faucibus lorem semper id. Proin a tempor magna, sed aliquet neque.

Curabitur euismod massa malesuada tristique bibendum. Aliquam quis volutpat ipsum, eu iaculis libero. Aenean scelerisque enim eros, ac vestibulum eros lacinia in. Proin vestibulum convallis nisl, nec malesuada magna tempor cursus. Suspendisse tristique ligula mi, non feugiat risus molestie id. Aliquam lobortis eu dolor sit amet hendrerit. Pellentesque dapibus, enim ac auctor blandit, eros erat vulputate magna, tristique dictum magna ipsum et orci. Maecenas interdum leo auctor odio maximus congue. Nullam mollis eros vitae odio eleifend, ut tincidunt ipsum pretium. Praesent quis enim nec elit vulputate auctor id commodo odio.

Vivamus diam sapien, rutrum sit amet tincidunt ac, vehicula nec ex. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis...

CSS

body {
	padding: 2em;
	background: #FFF;
	font-family: Geneva, Arial, Helvetica, sans-serif;
}

div.info {
	height: 10em;
	overflow: hidden;
	position: relative;
	cursor: pointer;
}
div.info:before, div.info:after {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
}
div.info:after {
	content: "More";/*TODO get from attributes!*/
	height: 1.5em;
	line-height: 1.5em;
	background: #FFF;
	text-align: center;
	text-transform: uppercase;
}
div.info:before {
	content: "";
	background: linear-gradient(to bottom, rgba(255,255,255,0) 0%,rgba(255,255,255,.9) 80%,rgba(255,255,255,1) 100%);
	bottom: 1.5em;
	height: 5em;
}