HTML/CSS: fade text with "Learn more..." link (demo) 

Joined:
02/21/2009
Posts:
172

August 05, 2014 13:35:05    Last update: August 05, 2014 13:36:15
This demo page shows how to fade text in the end of an abstract with a "Learn more..." link to the full text. This technique could be helpful when you want to display an RSS feed abstract in a fixed height element and provide a link to the full-length article at the bottom.
  • Code
  • Demo
<html>
<head>
<title>Learn More</title>
<style rel="text/css">
.gradient {
	display: block;
	position: absolute;
	right: 0px;
	bottom: 0px;
	height: 90px;
	background: linear-gradient(to bottom, rgba(252, 252, 252, 0) 0%, #FCFCFC 85%) repeat scroll 0% 0% transparent;
	width: 100%;
}

.gradient .label {
    position: absolute;
    bottom: 0px;
    right: 0px;
    cursor: pointer;
}
</style>
</head>
<body>
	<div id="content" style="position: relative; width: 220px;">
	Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et
dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea 
commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla 
pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est 
laborum.
	<div class="gradient">
		<a class="label" href="#more">Learn more...</a>
	</div>
	</div>
</body>
</html>
Share |
| Comment  | Tags