/*マウスオーバーで画像がにゅるっと拡大&全面キャプション表示*/

/*
※ベンダープレフィックス
-webkit-...Chrome/safari対応
-moz-...Firefox対応
-ms-...IE対応
-o-...Opera対応
*/

/* 画像をズームさせる場合はこのコードを記述する(大きさを変えたくない場合) */
.zoom{
  height: auto;
  width: auto;
  overflow: hidden; /* はみ出した要素を表示しない */
}

/* zoomクラスの変化にかかる時間の指定をする(今回は1秒) */
.zoom img{
  -webkit-transition:all 1s;
  -moz-transition:all 1s;
  -ms-transition:all 1s;
  -o-transition:all 1s;
  transition:all 1s;
}

/* :hover を記述し、(zoomクラス指定されたimgタグ内の)要素にマウスを乗せた時の形状変化の指定をする(今回は1.2倍大きくなる) */
.zoom img:hover {
  opacity: 0.8; /*半透明にする*/
  -webkit-transform: scale(1.2);
  -moz-transform: scale(1.2);
  -ms-transform: scale(1.2);
  -o-transform: scale(1.2);
  transform: scale(1.2);
}

/*-パターン２--------------------------------------------------------*/
/* 画像をズームさせる場合はこのコードを記述する(大きさを変えたくない場合) */
.zoom2{
  height: auto;
  width: auto;
  overflow: hidden; /* はみ出した要素を表示しない */
}

/* zoomクラスの変化にかかる時間の指定をする(今回は1秒) */
.zoom2 img{
  -webkit-transition:all 1s;
  -moz-transition:all 1s;
  -ms-transition:all 1s;
  -o-transition:all 1s;
  transition:all 1s;
}

/* :hover を記述し、(zoomクラス指定されたimgタグ内の)要素にマウスを乗せた時の形状変化の指定をする(今回は1.2倍大きくなる) */
.zoom2 img:hover {
  opacity: 1; /*半透明にする １＞0.9以下で半透明*/
  -webkit-transform: scale(1.2);
  -moz-transform: scale(1.2);
  -ms-transform: scale(1.2);
  -o-transform: scale(1.2);
  transform: scale(1.2);
}