CSS3 “Sliding Door” Hover Boxes

Here’s something I created for a website:

“Golden Etches”

View Pattern here.

“Gold Wreath”

View the pattern here.

“Mylar Cutouts”

View the pattern here.

 

This is the HTML code:

<div id="three_col">
<div class="grid_3 slideup_boxes">
    <img border="0" alt="" src="images/golden_etches.png" width="193" height="216" />
    <h1>"Golden Etches"</h1>
    <p>View Pattern <a href="http://www.colourlovers.com/pattern/3962155/Golden_Etches" target="_blank">here.</a></p>
</div>

<div class="grid_3 slideup_boxes">
     <img border="0" alt="" src="images/gold_wreath.png" width="193" height="216" />
     <h1>"Gold Wreath"</h1>
     <p>View the pattern <a href="http://www.colourlovers.com/pattern/3951133/gold_wreath" target="_blank">here.</a></p>
     </div>

<div class="grid_3 slideup_boxes">
      <img border="0" alt="" src="images/mylar_cutouts.png" width="193" height="216" />
      <h1>"Mylar Cutouts"</h1>
      <p>View the pattern <a href="http://www.colourlovers.com/pattern/3962159/Mylar_Cut_Outs" target="_blank">here.</a></p>
</div>
</div>

 

This is the CSS3 Code

@charset "utf-8";
/* CSS Document */
.grid_3 {
width: 33.33%;
float: left;
}
#three_col {
width: 100%;
}	
#three_col .grid_3.slideup_boxes {
	height: 192px;
	width: 173px;
	float: left;
	overflow: hidden;
	position: relative;
	background-color:#333333;
	color: #DDD;
	padding: 10px;
	margin: 10px;
	border: 6px solid #444;
}
.slideup_boxes img {
	position: absolute;
	left: 0px;
	top: 0px;
}
.slideup_boxes:hover img {
margin-left: -220px;
-webkit-transition: margin-left .3s linear;
-moz-transition: margin-left .3s linear;
-ms-transition: margin-left .3s linear;
-o-transition: margin-left .3s linear;
transition: margin-left .3s linear;
}
.slideup_boxes h1 {
font-size: 16px;
font-family: Arial, Helvetica, sans-serif;
}
.slideup_boxes p {
font-size: 14px;
}

.slideup_boxes a {
text-decoration: none;
color: #FFFF00;
}
.slideup_boxes a:hover {
text-shadow:0px 0px 14px #ccc8cc;
}