mixin card(classname, href, iconname, title, description)
	.card-container 
		.card(class=classname)
			a(href=href)
				.card--display
					i.material-icons=iconname
					h2=title
				.card--hover
					h2=title
					p=description
					p.link Click to see project
			.card--border
			
+card(
'',
'hottub', 
'hot_tub', 
'Hot Tub Time Machine', 
'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam at est orci. Nam molestie pellentesque mi nec lacinia. Cras volutpat arcu sit amet elit sodales, nec volutpat velit bibendum.')
+card(
'',
'worldweb', 
'public', 
'World Wide Web', 
'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam at est orci. Nam molestie pellentesque mi nec lacinia. Cras volutpat arcu sit amet elit sodales, nec volutpat velit bibendum.')
+card(
'',
'trainthings', 
'train', 
'Why I Hate Trains', 
'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam at est orci. Nam molestie pellentesque mi nec lacinia. Cras volutpat arcu sit amet elit sodales, nec volutpat velit bibendum.')
+card(
'card--dark',
'androidupdate', 
'android', 
'Another Android Update', 
'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam at est orci. Nam molestie pellentesque mi nec lacinia. Cras volutpat arcu sit amet elit sodales, nec volutpat velit bibendum.')
+card(
'card--dark',
'phonesoff', 
'ring_volume', 
'Why Phones Are So Loud', 
'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam at est orci. Nam molestie pellentesque mi nec lacinia. Cras volutpat arcu sit amet elit sodales, nec volutpat velit bibendum.')
View Compiled
$highlight: #5bc0eb;
$darkhighlight: #fde74c;

body {
	padding: 50px;
	display: flex;
	flex-flow: wrap;
	font-family: "Ubuntu", sans-serif;
	
	* {
		box-sizing: border-box;
	}
}

.card-container {
	flex: 300px;
	margin: 30px;
	
	.card {
		font-weight: bold;
		position: relative;
		width: 100%;
		
		a {
			padding: 30px;
			width: 100%;
			height: 400px;
			border: 2px solid black;
			background: white;
			text-decoration: none;
			color: black;
			display: block;
			transition: 0.25s ease;
			
			&:hover {
				transform: translate(-30px, -30px);
				border-color: $highlight;
				
				.card--display {
					display: none;
				}
				
				.card--hover {
					display: block;
				}
			}
			
			.card--display {
				i {
					font-size: 60px;
					margin-top: 200px;
				}
				
				h2 {
					margin: 20px 0 0;
				}
			}
			
			.card--hover {
				display: none;
				
				h2 {
					margin: 20px 0;
				}
				
				p {
					font-weight: normal;
					line-height: 1.5;
					
					&.link {
						margin: 20px 0 0;
						font-weight: bold;
						color: $highlight;
					}
				}
			}
		}
		
		.card--border {
			position: absolute;
			width: 100%;
			height: 100%;
			left: 0;
			top: 0;
			border: 2px dashed black;
			z-index: -1;
		}
		
		&.card--dark {
			a {
				color: white;
				background-color: black;
				border-color: black;
				
				.card--hover {
					.link {
						color: $darkhighlight;
					}
				}
			}
		}
	}
}
View Compiled

External CSS

  1. https://cdnjs.cloudflare.com/ajax/libs/material-design-icons/3.0.1/iconfont/material-icons.min.css

External JavaScript

This Pen doesn't use any external JavaScript resources.