hannibal, plz.

/******************IMAGEN+TEXTO+HOVER******************/

<center>

	<div id="caja1" style="background-image: url('http://i.imgur.com/01FjkXF.png');">

		<div id="text2">

			<div id="text">
				                                                           will graham
			</div>

		</div>

		<div id="caja2">

			<div id="text">
				                                                                                      <a href="url">hannibal</a> // <a href="url">plz</a>
			</div>

		</div>

	</div>


<style type="text/css">

#caja1{
position:relative;
border: 10px solid #000;
width:180px;
height:100px;
background: #000;
}

#caja2{
width:100px;
height:50px;
position:absolute;
top:21px;
left:33px;
border: 5px solid #fff;
-webkit-transform: scale(0);
transform: scale(0);
background-color: #000;transition:ease-in-out 1s;-webkit-transition:ease-in-out 1s;-ms-transition:ease-in-out 1s;-moz-transition:ease-in-out 1s;-webkit-transform: scale(0.2);  -ms-transform: scale(0.2);  -o-transform: scale(0.2);  transform: scale(0.2);opacity:0;
}

#caja1:hover #caja2{
-webkit-transform: scale(1);  -ms-transform: scale(1);  -o-transform: scale(1);  transform: scale(1);opacity:1;}

#text2 {
margin-top:21px;
margin-left:-5px;
width:100px;
height:50px;
border: 5px solid #fff;
text-align: center;
background: #000;
color: #fff;
text-transform: uppercase;
}
#text {
padding-top: 18px;
width:100px;
height:50px;
text-align: center;
text-transform: uppercase;
}</style>
</center>


/******************TEXTO+HOVER******************/

<center>
	<div id="caja1">

		<div id="text2">

			<div id="text">
				                                                           will graham
			</div>

		</div>

		<div id="caja2">

			<div id="text">
				                                                                                      <a href="url">hannibal</a> // <a href="url">plz</a>
			</div>

		</div>

	</div>


	   <style type="text/css">

#caja1{
position:relative;
border: 10px solid #000;
width:180px;
height:100px;
background: #000;}

#caja2{width:100px;
height:50px;
position:absolute;
top:21px;
left:33px;
border: 5px solid #fff;
-webkit-transform: scale(0);
transform: scale(0);
background-color: #000;transition:ease-in-out 1s;-webkit-transition:ease-in-out 1s;-ms-transition:ease-in-out 1s;-moz-transition:ease-in-out 1s;-webkit-transform: scale(0.2);  -ms-transform: scale(0.2);  -o-transform: scale(0.2);  transform: scale(0.2);opacity:0;}

#caja1:hover #caja2{-webkit-transform: scale(1);  -ms-transform: scale(1);  -o-transform: scale(1);  transform: scale(1);opacity:1;}

#text2 {
margin-top:21px;
margin-left:-5px;
width:100px;
height:50px;
border: 5px solid #fff;
text-align: center;
background: #000;
color: #fff;
text-transform: uppercase;
}
#text {
padding-top: 18px;
width:100px;
height:50px;
text-align: center;
text-transform: uppercase;
}</style>
</center>


/******************IMAGEN+HOVER******************/

<center>
<div id="caja1" style="background-image: url('http://i.imgur.com/01FjkXF.png');">

		<div id="caja2">

			<div id="text">
				                                                                                      <a href="url">hannibal</a> // <a href="url">plz</a>
			</div>

		</div>

	</div>
	   <style type="text/css">

#caja1{
position:relative;
border: 10px solid #000;
width:180px;
height:100px;
background: #000;}

#caja2{width:100px;
height:50px;
position:absolute;
top:21px;
left:33px;
border: 5px solid #fff;
-webkit-transform: scale(0);
transform: scale(0);
background-color: #000;transition:ease-in-out 1s;-webkit-transition:ease-in-out 1s;-ms-transition:ease-in-out 1s;-moz-transition:ease-in-out 1s;-webkit-transform: scale(0.2);  -ms-transform: scale(0.2);  -o-transform: scale(0.2);  transform: scale(0.2);opacity:0;}

#caja1:hover #caja2{-webkit-transform: scale(1);  -ms-transform: scale(1);  -o-transform: scale(1);  transform: scale(1);opacity:1;}

#text2 {
margin-top:21px;
margin-left:-5px;
width:100px;
height:50px;
border: 5px solid #fff;
text-align: center;
background: #000;
color: #fff;
text-transform: uppercase;
}
#text {
padding-top: 18px;
width:100px;
height:50px;
text-align: center;
text-transform: uppercase;
}</style>
</center>