CSS3でロールオーバー

CSS3

画像の仮置きのスペースを確保するためにimage placeholderを利用
http://placehold.it/

html

<!DOCTYPE HTML>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>css3でロールオーバー</title>
<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<!--[if lt IE 9]>
<script src="http://cdnjs.cloudflare.com/ajax/libs/modernizr/2.5.3/modernizr.min.js"></script>
<![endif]-->
<style>
article,aside,dialog,figure,footer,header,hgroup,menu,nav,section{display:block}
</style>
<link rel="stylesheet" href="style.css">
<link href='http://fonts.googleapis.com/css?family=OFL+Sorts+Mill+Goudy+TT' rel='stylesheet' type='text/css'>
</head>

<body>
<div id="container" class="clearfix">
<h1>SELECT SHOP</h1>
<div id="gallery">
<article>
<a href="#">
<img src="http://placehold.it/150x200" alt="#">
<div class="detail">
<p>one piece with dolman sleeves</p>
</div>
</a>
</article>
<article>
<a href="#">
<img src="http://placehold.it/150x200" alt="#">
<div class="detail">
<p>one piece with dolman sleeves</p>
</div>
</a>
</article>
<article>
<a href="#">
<img src="http://placehold.it/150x200" alt="#">
<div class="detail">
<p>one piece with dolman sleeves</p>
</div>
</a>
</article>
<article>
<a href="#">
<img src="http://placehold.it/150x200" alt="#">
<div class="detail">
<p>one piece with dolman sleeves</p>
</div>
</a>
</article>
<article>
<a href="#">
<img src="http://placehold.it/150x200" alt="#">
<div class="detail">
<p>one piece with dolman sleeves</p>
</div>
</a>
</article>
<article>
<a href="#">
<img src="http://placehold.it/150x200" alt="#">
<div class="detail">
<p>one piece with dolman sleeves</p>
</div>
</a>
</article>
<article>
<a href="#">
<img src="http://placehold.it/150x200" alt="#">
<div class="detail">
<p>one piece with dolman sleeves</p>
</div>
</a>
</article>
<article>
<a href="#">
<img src="http://placehold.it/150x200" alt="#">
<div class="detail">
<p>one piece with dolman sleeves</p>
</div>
</a>
</article>
<article>
<a href="#">
<img src="http://placehold.it/150x200" alt="#">
<div class="detail">
<p>one piece with dolman sleeves</p>
</div>
</a>
</article>
<article>
<a href="#">
<img src="http://placehold.it/150x200" alt="#">
<div class="detail">
<p>one piece with dolman sleeves</p>
</div>
</a>
</article>
<article>
<a href="#">
<img src="http://placehold.it/150x200" alt="#">
<div class="detail">
<p>one piece with dolman sleeves</p>
</div>
</a>
</article>
<article>
<a href="#">
<img src="http://placehold.it/150x200" alt="#">
<div class="detail">
<p>one piece with dolman sleeves</p>
</div>
</a>
</article>
</div>
</div>
</body>
</html>


CSS　リセット部分は省略

@charset "utf-8";
html,body {
  height: 100%;
}
body {
  border-left: 20px solid #333;
  border-right: 20px solid #333;
}
a {
  color: #fff;
  text-decoration: none;
}
#container {
  width: 910px;
  margin: 0 auto;
}
h1 {
  font-size: 18px;
  margin-bottom: 2px;
  padding-top: 2px;
}
#gallery article {
  float: left;
  width: 150px;
  display: block;
  margin: 0 2px 2px 0;
}
#gallery article:nth-child(6n) {
  margin-right: 0;
}
#gallery article a {
  display: block;
  position: relative;
  width: 150px;
  height: 200px;
  -webkit-transition:-webkit-transform 0.4s ease;
  -moz-transition:-moz-transform 0.4s ease;
  -o-transition:-o-transform 0.4s ease;
  transition:transform 0.4s ease;
}
#gallery article a:hover {
  -webkit-transform:scale(1.05,1.05);
  -moz-transform:scale(1.05,1.05);
  -ms-transform:scale(1.05,1.05);
  -o-transform:scale(1.05,1.05);
  transform:scale(1.05,1.05);
  z-index:100;
}
#gallery article a div {
  position: absolute;
  top: 0;
  left: 0;
  width: 150px;
  height: 200px;
  background: rgba(50,50,50,0.6);
  opacity: 0;
  -webkit-transition:opacity 0.4s ease;
  -moz-transition:opacity 0.4s ease;
  -o-transition:opacity 0.4s ease;
  transition:opacity 0.4s ease;
}
#gallery article a div p {
  padding: 80px 10px 0;
  text-align: center;
  font-family: 'OFL Sorts Mill Goudy TT', arial, serif;
}
#gallery article a:hover div {
  opacity: 1;
}