<html lang="fr">
<head>
	<!--
		https://dribbble.com/shots/2001637-Article-News-Card-UI
		http://www.grafikart.fr/tutoriels/html-css/card-ui-629
	-->
	<meta charset="UTF-8">
	<link href='https://fonts.googleapis.com/css?family=Open+Sans:400,700' rel='stylesheet' type='text/css'>
	<link rel="stylesheet" href="css/style.min.css">
</head>
<body>
	<article class="card">
		<header class="card__thumb">
			<a href="#"><img src="https://images.unsplash.com/photo-1512466699224-9d8217244131?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=4b6f389eb54cb8e27ee8ee5d4040a5d7&dpr=1&auto=format&fit=crop&w=1000&q=80&cs=tinysrgb" ></a>
			
		</header>
		<div class="card__date">
			<span class="card__date__day">23</span>
			<span class="card__date__month">Mai</span>
		</div>
		<div class="card__body">
			<div class="card__category"><a href="#">Category</a></div>
			<div class="card__title"><a href="#">Vivamus elementum semper nisivi troscup</a></div>
			<div class="card__subtitle">Donec posuere vulputate</div>
			<p class="card__description">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Labore sapiente doloremque recusandae, modi dolore velit, illum itaque minus inventore, omnis et nisi rem facere. Labore sapiente doloremque recusandae, modi dolore velit, illum itaque minus inventore, omnis et nisi rem facere.</p>
		</div>
		<footer class="card__footer">
			<span class="icon icon--time">6 min</span>
			<span class="icon icon--comment"><a href="#">2 comments</a></span>
		</footer>
	</article>
</body>
</html>
$bg:	#d8e0e5;
$color:	#08c;
$blanc:	#fff;
$noir: #000;
$text: #666c74;
$footer: #a3a9ab;
$duration: 0.3s;

$heightimg: 235px;

$heighthoverimg: 145px;
$heightbody: 185px;

$widthimg: 376px;

@mixin icon() {
	display: inline-block;
	font: normal normal normal 16px/1 FontAwesome;
	text-rendering: auto;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	transform: translate(0, 0);
}

* {
	box-sizing: border-box;
}

body {
	font-family: 'Open sans';
	font-size: 16px;
	line-height: 1.4;
	background: $bg;
}

.card {
	position: absolute;
	top: 50%;
	left: 50%;
	width: $widthimg;
	transform: translateX(-50%) translateY(-50%);
	background: $blanc;
	box-shadow: 0 0 20px rgba($noir,0.1);
	transition: box-shadow $duration;
	&:hover {
		box-shadow: 0 0 50px rgba($noir ,0.3);
	}
	a {
		color: inherit;
		text-decoration: none;
	}
}

.card__date {
	background: $color;
	position: absolute;
	top: 20px;
	right: 20px;
	width: 45px;
	height: 45px;
	border-radius: 50%;
	color: $blanc;
	text-align: center;
	line-height: 13px;
	font-weight: bold;
	padding-top: 10px;
	&__day {
		display: block;
		font-size: 14px;
	}

	&__month {
		display: block;
		font-size: 10px;
		text-transform: uppercase;
	}
}



.card__thumb{
	height: $heightimg;
	overflow: hidden;
	background-color: $noir;
	transition: height $duration;

	img{
		display: block;
		opacity: 1;
		transition: opacity $duration, transform $duration;
		transform: scale(1);
	}

	.card:hover & img{
		opacity: 0.6;
		transform: scale(1.2);
	}
	.card:hover &{
		height: $heightimg - $heighthoverimg;
	}
}



.card__body {
	position: relative;
	padding: 20px;
	height: $heightbody;
	transition: height $duration;
	.card:hover &{ height: $heightbody + $heighthoverimg; }
}

.card__category {
	position: absolute;
	top: -25px;
	left: 0;
	height: 25px;
	padding: 0 15px;
	background: $color;
	color: $blanc;
	font-size: 11px;
	line-height: 25px;
	a {
		color: $blanc;
		text-decoration: none;
		text-transform: uppercase;
	}
}

.card__title {
	padding: 0 0 10px 0;
	margin: 0;
	font-size: 22px;
	color: $noir;
	font-weight: bold;
	.card:hover &{
		animation: titleBlur $duration;
	}
}

.card__subtitle {
	margin: 0;
	padding: 0 0 10px 0;
	color: $color;
	font-size: 19px;
	.card:hover &{
		animation: subtitleBlur $duration;
	}
}

.card__description {
	position: absolute;
	left: 20px;
	right: 20px;
	bottom: 65px;

	margin: 0;
	padding: 0;

	color: $text;
	font-size: 14px;
	line-height: 27px;

	opacity: 0;
	transition: opacity $duration - 0.1s, transform $duration - 0.1s;
	transition-delay: 0s;
	transform: translateY(25px);
	.card:hover &{
		opacity: 1;
		transition-delay: 0.1s;
		transform: translateY(0);
	}
}

.card__footer {
	position: absolute;
	color: $footer;
	bottom: 20px;
	left: 20px;
	right: 20px;
	font-size: 11px;
	.icon--comment {
		margin-left: 10px;
	}
}

.icon {
	display: inline-block;
	vertical-align: middle;
	margin-right: 2px;
	&:before {
		display: inline-block;
		text-align: center;
		height: 14px;
		width: 14px;
		margin-top: -2px;
		margin-right: 6px;
	}
}

.icon--comment {
	&:before {
		content: "\f0e6 ";
		@include icon;
	}
}

.icon--time {
	&:before {
		content: "\f017 ";
		@include icon;
	}
}

@keyframes titleBlur {
	0%{
		opacity:0.6;
		text-shadow: 0px 5px 5px rgba($noir,0.6);
	}
	100%{
		opacity:1;
		text-shadow: 0px 5px 5px rgba($noir,0);
	}
}

@keyframes subtitleBlur {
	0%{
		opacity:0.6;
		text-shadow: 0px 5px 5px rgba($color,0.6);
	}
	100%{
		opacity:1;
		text-shadow: 0px 5px 5px rgba($color,0);
	}
}
View Compiled

External CSS

  1. //maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css

External JavaScript

This Pen doesn't use any external JavaScript resources.