<h2>Hover Over Me!</h2>
<div class="container">
 <a href="#">
  <span>
   <p>
     <strong>Bill</strong> Freakin' <strong>Murray!</strong>
   </p>
  </span>
  <img src="http://placeimg.com/250/250"></img>
 </a>
</div>
@import url(https://fonts.googleapis.com/css?family=Open+Sans:800,400);

html {
	background: rgba(0, 0, 0, 0.8);
}

.container {
	position: relative;
	box-shadow: 7px 7px 0 rgba(0, 0, 0, 0.025),
		2px 2px 5px 2px rgba(0, 0, 0, 0.25) inset;
	margin: 30px auto;
	border: 10px solid #fff;
	font-size: 1em;
	overflow: hidden;
	width: 300px;
}

.container img {
	display: block;
	width: 100%;
	margin: 0 auto;
	position: relative;
	z-index: -2;
}

.container a {
	display: block;
	position: relative;
	width: 100%;
	height: 100%;
}

.container a span {
	display: block;
	background: rgba(42, 182, 145, 0.95);
	color: #fff;
	position: absolute;
	bottom: 0;
	width: 100%;
	height: 0;
	overflow: hidden;
	opacity: 100;
	transition: all 0.2s ease-out;
	z-index: -1;
}

.container a:hover span {
	height: 100%;
	opacity: 100;
}

.container p {
	text-align: center;
	margin: 135px 0;
	font-family: "Open Sans", sans-serif;
	letter-spacing: 1px;
}

h2 {
	text-align: center;
	color: #fff;
	font-family: "Open Sans", sans-serif;
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: 1px;
	font-size: 30px;
	text-shadow: 16px 16px 1px rgba(0, 0, 0, 0.75);
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.