jQueryやJavaScriptを使わないロールオーバー画像

css

商品画像一覧で目的の商品画像の上にマウスを重ねると

ロールオーバー画像が浮かびあがる方法として専ら『a:hover』などの擬似クラスを使用しますが、
このやり方をcss3の新しい技術を加えた発展型を使用します。

html5

〜head,body部分省略〜

<div id="container" class="clearfix">
<h1>SELECT SHOP</h1>
<div id="gallery">

<article>
<a href="#">
<img src="http://placehold.it/150x200/2C76CC/FFF/" alt="">
<div class="detail">
<p>one piece with dolman sleeves</p>
</div>
</a>
</article>
</div><!-- /#gallery -->
</div><!-- /#container -->

なお、HTML5になってからインライン＆ブロック要素の概念が無い為、a要素でdiv要素を囲むことが可能です。

css3

html,body{
 height:100%;
}

body{
 border-right:20px solid #000;
 border-left:20px solid #000;
}

/*〔1〕背景の横枠線をプラウザウインドウに沿って設置*/

a{
 color:#FFF;
 text-decoration:none;
}

#container{
 width:910px;
 margin:0 auto;
}

h1{
 font-size:18px;
 margin-bottom:2px;
 padding-top:2px;
}
/*〔2〕全体の基本レイアウトを設定*/

#gallery article{
 float:left;
 width:150px;
 display:block;
 margin:0 2px 2px 0;
}

#gallery article:nth-child(6n){
 margin-right:0;
}

/*〔3〕商品画像をfloatで横並びにして横幅が外枠(#container)の910px分の6画像並んだらカラム落ちで画像の自動改行するように設定。
各行の6番目のmagin-rightは既に10px分外枠があるので
nth-child(6n)で指定する。
*/

#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;
}

/*〔4〕transitionでFlashやjQueryを使わずにCSS単独である要素を別の形に変化するアニメーション効果を表現できる。*/

  #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;
  }
/*〔5〕ホバー時にtransform:scaleで拡大と同時にz-indexを階層を上げて。*/

 #gallery article a div{
 position:absolute;
 top:0;
 left:0;
 width:150px;
 height:200px;
 background-color:rgba(50,0,20,0.6);
 opacity:0;
 -webkit-transition:opacity 0.4s ease;
 -moz-transition:opacity 0.4s ease;
 -o-transition:opacity 0.4s ease;
 -ms-transition:opacity 0.4s ease;
 transition:opacity 0.4s ease;
 }

/*〔6〕div要素内の文字をロールオーバー時の浮き上がらせるボックスとして設定。
opacity要素で浮かび上がった背景色を下の元画像に透過させる

*/ 

 #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;
 }

〔4〕のtransitionについて補足。
transitionのプロパティは

  • transition-property（変化するCSS）、
  • transition-duration（transitionが完了する時間）、
  • transition-timing-function（transition効果の速度曲線を指定）、
  • transition-delay（transition効果を始める時間を予定指示）

がある、transitionだけの場合はショートハンドが聞くので
上記の順番で記述ができる。