I saw a cool thing on www.css-tricks.com (one of my favorite sites) and after looking at his code plus a few others was able to doit…so I present:
COOL SLIDE IN BACKGROUND (not the best name but, whattyagonnado?)

Here’s the code…all you need is a png file named droid.png:

 

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled Document</title>
<style type="text/css">
#thebox {	
-webkit-border-radius: 14px;	
-moz-border-radius: 14px;	
border-radius: 14px;	
background-color: #10365b;	
height: 300px;	width: 400px;	
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;	
color: #FFF;	font-size: 30px;	
background-image: url(droid.png);	
background-position: 390px 0px;	background-repeat:no-repeat;	
overflow: hidden;}#thebox p {	padding-top: 16px;	
padding-right: 150px;	
padding-bottom: 16px;	
padding-left: 16px;}#thebox:hover  {		
position: absolute;	
background-color: #30567b;	
background-image: url(droid.png);	
background-position: 190px 0px;	background-repeat:no-repeat;			
-webkit-transition: all 0.8s ease; 	
-moz-transition: all 0.8s ease; 	
background-position: 220px 100%; 	
background-repeat: no-repeat;	}
</style></head>
<body>	<div id="thebox">	  
<p>This is a cool box with some text in it </p>	  
<p>OK, that's all.</p>	
</div>
</body></html>