.wrapper

	.card
		.fon
		.text
			h2 Transition
			p Lorem ipsum dolor sit amet consectetur adipisicing elit.
			.triangle
		.btn View
		
	.card
		.fon
		.text
			h2 Transition
			p Lorem ipsum dolor sit amet consectetur adipisicing elit.
			.triangle
		.btn View
		
	.card
		.fon
		.text
			h2 Transition
			p Lorem ipsum dolor sit amet consectetur adipisicing elit.
			.triangle
		.btn View
		
	.card
		.fon
		.text
			h2 Transition
			p Lorem ipsum dolor sit amet consectetur adipisicing elit.
			.triangle
		.btn View
View Compiled
@import url('https://fonts.googleapis.com/css?family=Lato:100,300,400,700,900')

$blue: #3498DB
$white: #fff
$speed: .25s
*
	margin: 0
	padding: 0
	box-sizing: border-box

body
	font-family: 'Lato'
	
.wrapper
	width: 100%
	height: 100vh
	background: $blue
	display: flex

.card
	width: 200px
	height: 350px
	background: url(https://images.unsplash.com/photo-1510258791301-4d7ac469cc46?ixlib=rb-0.3.5&s=e7fb8ddadf15658efc6a99bd5fd6482b&dpr=1&auto=format&fit=crop&w=1000&q=80&cs=tinysrgb) no-repeat center / cover
	margin: auto
	position: relative
	overflow: hidden
	z-index: 1
	&:hover
		.fon
			opacity: 0
		.text
			height: 10%
			padding: 10px 0 0
			h2
				margin-bottom: 0
			p
				opacity: 0
		.btn
			transform: scale(1)
.fon
	position: absolute
	width: 100%
	height: 100%
	background: #000
	opacity: .3
	z-index: 2
	transition: opacity $speed
.text
	position: absolute
	top: 0
	left: 0
	display: flex
	flex-direction: column
	align-items: center
	justify-content: space-between
	background: $white
	height: 60%
	width: 100%
	text-align: center
	padding: 40px 0 0
	z-index: 4
	transition: height $speed, padding $speed
	h2
		text-transform: uppercase
		color: $blue
		letter-spacing: 2px
		margin-bottom: 20px
		transition: margin-bottom $speed
	p
		line-height: 20px
		margin: 0 10px
		color: #777
		z-index: 5
		transition: opacity $speed
	.triangle
		width: 100%
		height: 50px
		background: #fff
		z-index: 9
		transform: matrix(1.01, -0.3, 0, 2, -1, 10)
		z-index: 3

.btn
	position: absolute
	top: calc(50% - 20px)
	left: calc(50% - 40px)
	margin: auto
	width: 80px
	height: 40px
	display: flex
	justify-content: center
	align-items: center
	text-transform: uppercase
	letter-spacing: 2px
	border: 2px solid $white
	color: $white
	transition: transform $speed - .1s, background $speed, color $speed, border-color $speed
	z-index: 4
	transform: scale(0)
	cursor: pointer
	&:hover
		background: $blue
		border-color: $blue

	

View Compiled

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.