Simple Tile Hover Effect

index.html

.tiles
	a.tile(href="#")
		img(src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/216995/1.jpg")
		.details
			span.title Lorem Ipsum Dolor
			span.info Quisque vel felis lectus donec vitae dapibus magna
	a.tile(href="#")
		img(src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/216995/2.jpg")
		.details
			span.title Lorem Ipsum Dolor
			span.info Quisque vel felis lectus donec vitae dapibus magna
	a.tile(href="#")
		img(src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/216995/3.jpg")
		.details
			span.title Lorem Ipsum Dolor
			span.info Quisque vel felis lectus donec vitae dapibus magna
	a.tile(href="#")
		img(src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/216995/4.jpg")
		.details
			span.title Lorem Ipsum Dolor
			span.info Quisque vel felis lectus donec vitae dapibus magna

script.js

// Nothing to see here; move along.

Simple Tile Hover Effect.markdown

Simple Tile Hover Effect

A simple little hover effect for tiles. Photos from http://deathtothestockphoto.com

A Pen by Chris Deacy on CodePen.

License.

style.css

// variables
$anim-speed: 0.3s;

// reset
* {
	margin: 0;
	padding: 0;
	color: inherit;
	box-sizing: inherit;

	&:focus {
		outline: none;
	}
}

html {
	box-sizing: border-box;
}

body {
	background-color: #ecf0f1;
	font-family: 'Open Sans', sans-serif;
}
				
a {
	text-decoration: none;

	&:hover {
		text-decoration: underline;
	}
}

// main styles
.tiles {
	width: 1040px;
	font-size: 0;
	text-align: center;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%,-50%);
	
	.tile {
		display: inline-block;
		margin: 10px;
		text-align: left;
		opacity: .99;
		overflow: hidden;
		position: relative;
		border-radius: 3px;
		box-shadow: 0 0 20px 0 rgba(0,0,0,.05);
		
		&:before {
			content: '';
			background: linear-gradient(to bottom, rgba(0,0,0,0) 0%,rgba(0,0,0,0.7) 100%);
			width: 100%;
			height: 50%;
			opacity: 0;
			position: absolute;
			top: 100%;
			left: 0;
			z-index: 2;
			transition-property: top, opacity;
			transition-duration: $anim-speed;
		}
		
		img {
			display: block;
			max-width: 100%;
			backface-visibility: hidden;
			-webkit-backface-visibility: hidden;
		}
		
		.details {
			font-size: 16px;
			padding: 20px;
			color: #fff;
			position: absolute;
			bottom: 0;
			left: 0;
			z-index: 3;
			
			span {
				display: block;
				opacity: 0;
				position: relative;
				top: 100px;
				transition-property: top, opacity;
				transition-duration: $anim-speed;
				transition-delay: 0s;
			}
			
			.title {
				line-height: 1;
				font-weight: 600;
				font-size: 18px;
			}
			
			.info {
				line-height: 1.2;
				margin-top: 5px;
				font-size: 12px;
			}
		}
		
		&:hover {
			
			&:before,
			span {
				opacity: 1;
			}
			
			&:before {
				top: 50%;
			}
			
			span {
				top: 0;
			}
			
			.title {
				transition-delay: 0.15s;
			}
			
			.info {
				transition-delay: 0.25s;
			}
		}
	}
}

styles

<link href="//fonts.googleapis.com/css?family=Open+Sans:400,600" rel="stylesheet" />