Article preview

In this example below you will see how to do a Article preview with some HTML / CSS and Javascript

Thumbnail
This awesome code was written by ceilenbecker, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright ceilenbecker ©
  • HTML
  • CSS
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>Article preview</title>
  
  
  
      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>

  	<article class="photos" id="kerala">
		<img class="titleimg" src="img/girl.png" alt="dancing girl"/>
		<time>27 MAR</time>
		<div class="slide">
			<h1>True Paradise on Earth: Kerala, India</h1>
			<h2>They call it "God's Own Country."</h2>
			<p class="summary">It could be the pristine beaches and towering cliffs rising high above them, or it could be the endlessy intricate network of rivers, lagoons...</p>
		</div>
		<footer>
			<ul>
				<li class="readtime">6 min. read</li>
				<li class="commcount">39 comments</li>
			</ul>
		</footer>
	</article>
	<article class="travel" id="kerala">
		<img class="titleimg" src="img/girl.png" alt="dancing girl"/>
		<time>27 MAR</time>
		<div class="slide">
			<h1>True Paradise on Earth: Kerala, India</h1>
			<h2>They call it "God's Own Country."</h2>
			<p class="summary">tempor incididunt ut labore et dolore magna aliqua.</p>
		</div>
		<footer>
			<ul>
				<li class="readtime">6 min. read</li>
				<li class="commcount">39 comments</li>
			</ul>
		</footer>
	</article>
	<article class="travel" id="kerala">
		<img class="titleimg" src="img/girl.png" alt="dancing girl"/>
		<time>27 MAR</time>
		<div class="slide">
			<h1>True Paradise on Earth: Kerala, India</h1>
			<h2>They call it "God's Own Country."</h2>
			<p class="summary">tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco</p>
		</div>
		<footer>
			<ul>
				<li class="readtime">6 min. read</li>
				<li class="commcount">39 comments</li>
			</ul>
		</footer>
	</article>
	<article class="travel" id="kerala">
		<img class="titleimg" src="img/girl.png" alt="dancing girl"/>
		<time>27 MAR</time>
		<div class="slide">
			<h1>True Paradise on Earth: Kerala, India</h1>
			<h2>They call it "God's Own Country."</h2>
			<p class="summary">tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco</p>
		</div>
		<footer>
			<ul>
				<li class="readtime">6 min. read</li>
				<li class="commcount">39 comments</li>
			</ul>
		</footer>
	</article>
  
  

</body>

</html>

/*Downloaded from https://www.codeseek.co/ceilenbecker/article-preview-YGAgBp */
@font-face{
	font-family: FA;
	src:url("fonts/FontAwesome.otf");
}

*{
	box-sizing: border-box;
}
p,div,img,ul,li,article{margin: 0;padding:0;}
body{
	background-color: grey;
	max-width: 1200px;
	min-width: 600px;
	width: 70%;
	margin: 0 auto;
}
article{
	display: inline-block;
	position: relative;
	width:300px;
	height:400px;
	margin:auto;
	background-color: black;
	box-shadow: 10px 10px 50px 10px black;
	font-family: Arial;
	color: rgb(80,80,80);
	overflow: hidden;
	margin: 45px;
}
article h2{
	font-size: 16px;
	font-weight: normal;
}
article h1{
	font-size: 20px;
	font-weight: bold;
}
article img.titleimg{
	width: 300px;
	height:190px;
	transition: 0.3s;
}
article:hover img.titleimg{
	transform:scale(1.3);
	transition-duration: 0.3s;
	opacity: 0.5;
	transition: 0.3s;
}
article time{
	position:absolute;
	top:15px;
	right:15px;
	display: block;
	width:45px;
	height: 45px;
	border-radius: 50%;
	text-align: center;
	font-size: 14px;
	line-height:16px;
	padding-top:6px;
}
article p.cat{
	position: absolute;
	top:-30px;
	left: 0px;
	padding:0 15px;
	height:30px;
	line-height: 30px;
}
article div.slide {
	position: absolute;
	bottom: 70px;
	min-height:140px;
	background-color: white;
	transition: 0.3s;
	padding:0 20px;
}
article div.slide::before{
	position: absolute;
	top:-30px;
	left: 0px;
	display: inline-block;
	content:'';
	padding:0 15px;
	height:30px;
	line-height: 30px;
}
article p.summary{
	height: 0px;
	color:rgba(0,0,0,0);
	transition: 0.3s;
}
article:hover p.summary{
	height: 100px;
	color:rgba(80,80,80,1);
	transition: 0.3s;
}
article footer{
	position: absolute;
	height: 70px;
	width: 100%;
	padding:20px;
	background-color: white;
	bottom: 0;
	font-size: 12px;
	color: grey;
}
article footer li{
	display: inline-block;
	width: 35%;
}
article footer li.readtime::before{
	content: '\f252';
	font-family:FA;
}
article footer li.commcount::before{
	content: '\f086';
	font-family: FA;
}
/*PHOTOS*/

article.photos div.slide::before,article.photos time{
	background-color: darkorange;
	color:white;	
}
article.photos h2{
	color:darkorange;
}
article.photos div.slide::before{
	content:'PHOTOS';
}
/*TRAVEL*/

article.travel div.slide::before,article.travel time{
	background-color: darkblue;
	color:white;	
}
article.travel h2{
	color:darkblue;
}
article.travel div.slide::before{
	content:'TRAVEL';
}

Comments