<div class="background">
    <div class="caption">
          <h1>It’s hard to explain puns to kleptomaniacs because they always take things literally.</h1>
      <a href="#" class="btn btn-ghost">Read More Jokes</a>
    </div>
</div>
@import url(https://fonts.googleapis.com/css?family=Roboto);

html, body {
    background: #000;
    height: 100%; 
    width: 100%;
    padding: 0;
    margin: 0;
    font-family: 'Roboto', sans-serif;
}

/* -- Background -- */
.background {
    position: relative;
    height:700px;
    width:1000px;
    margin: 0 auto;
}
	.background:before {
		content: "";
		position: absolute;
		top: 0;
		left: 0;
		z-index:1;
		display:block;
		height:700px;
		width:1000px;
		opacity: 0.5; 
		background:url('https://unsplash.imgix.net/uploads/1412112828986a673b954/1d8ef901?fit=crop&fm=jpg&h=700&q=75&w=1050') no-repeat;
		background-position:0;
		-webkit-transition:all 1s ease;
		-moz-transition:all 1s ease;
		-o-transition:all 1s ease;
		transition:all 1s ease;
	}
		.background:hover:before {
			background-position: -50px;
			opacity: .7;
		}
		
	.background div {
		position: relative;
		z-index:5;
		color: #fff;
		font-weight: lighter;
		position: absolute;
		left: 20%;
		top: 30%;
		width: 60%;
	}
		.background div h1 {
			font-weight: lighter;
		}


/* -- Buttons -- */
.btn {
	border: 2px solid #fff;
	outline: 0;
	padding: 10px 15px;
	cursor: pointer;
    border-radius: 4px;
    min-width: 170px;
    display: inline-block;
    color: #fff;
    text-align: center;
    text-decoration: none;
}
	.btn.btn-ghost {
		color: #fff;
		background: transparent;
	}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.