<div class="post-card-container">
	<div class="post-img-container"><img src=https://upload.wikimedia.org/wikipedia/commons/thumb/6/66/Stem_rust_close_up.jpg/2560px-Stem_rust_close_up.jpg>
	</div>
	<div class="post-card-content">
		<div class="post-date">06.25.2019</div>
		<div class="post-title">I named my cat after wheat. It's okay for you to be jelly.</div>
		<div class="post-category">Sweet</div>
	</div>
</div>

@import url(https://fonts.googleapis.com/css?family=Roboto:400,500,700)

// variables
$card-width: 350px
$card-height: 350px

*
	box-sizing: border-box
	margin: 0
	padding: 0

body
	background: #FFFFFF

.post-card-container
	width: $card-width
	height: $card-height
	position: relative
	margin: 30px 30px 30px 30px
	border-radius: 10px
	text-align: center
	background:  no-repeat
	z-index: 10
	transition: 					all 1.5s ease
	-o-transition: 				all 1.5s ease
	-ms-transition: 			all 1.5s ease
	-moz-transition: 			all 1.5s ease
	-webkit-transition: 	all 1.5s ease
	color: white

	&::before,
	&::after
		content: ''
		width: 300px
		height: 10px
		margin-left: -150px
		background: rgba(0, 0, 0, 0.25)
		border-radius: 50%
		position: absolute
		bottom: -15px
		left: 50%
		visibility: hidden
		opacity: 0
		transition: 					all 1.5s ease
		-o-transition: 				all 1.5s ease
		-ms-transition: 			all 1.5s ease
		-moz-transition: 			all 1.5s ease
		-webkit-transition: 	all 1.5s ease

	&:hover
		transform: 						translateY(-10px)
		-o-transform: 				translateY(-10px)
		-ms-transform: 				translateY(-10px)
		-moz-transform: 			translateY(-10px)
		-webkit-transform: 		translateY(-10px)
		color: black

		&::before, 
		&::after
			transform: 					translateY(10px)
			-o-transform: 			translateY(10px)
			-ms-transform: 			translateY(10px)
			-moz-transform: 		translateY(10px)
			-webkit-transform: 	translateY(10px)
			visibility: visible
			opacity: 1
		& .post-img-container
			background: white
		& img
			opacity: .2
			transform: 					scale(1.1)
			-o-transform: 			scale(1.1)
			-ms-transform: 			scale(1.1)
			-moz-transform: 		scale(1.1)
			-webkit-transform: 	scale(1.1)
			

	
.post-card-content
	text-align: left
	margin: 30px 0 0 10px
	position: absolute
	z-index: 20
	width: 100%
	top: 0
	left: 0

.post-date
	font-family: 'Roboto', sans-serif
	font-size: 20px
	line-height: 40px
	opacity: .7

.post-title
	font-family: 'Roboto', sans-serif
	font-size: 40px
	line-height: 35px
	font-weight: 700

.post-category
	font-family: 'Roboto', sans-serif
	font-size: 15px
	line-height: 40px

.post-img-container
	width: 100%
	height: 100%
	position: relative
	border-radius: 10px
	overflow: hidden
	Z-index: -10
	background: black
	border-style: solid
	border-color: clear
	border-width: 1px
	margin: 0
	padding: 0
	& img
		height: 350px
		opacity: .8
		text-replace: 				all 1.5s ease
		-o-transition: 				all 1.5s ease
		-ms-transition: 			all 1.5s ease
		-moz-transition: 			all 1.5s ease
		-webkit-transition: 	all 1.5s ease