a {
position: relative;
display: block;
width: 300px;
height: 200px;
background: #ff0000;
overflow: hidden;
-webkit-transition: all 0.3s ease;
-moz-transition: all 0.3s ease;
-ms-transition: all 0.3s ease;
-o-transition: all 0.3s ease;
transition: all 0.3s ease; /* 下のものをまとめる事も可能 全てのプロパティを0.3秒で開始と完了を滑らかに変化させる */
}
a:hover {
opacity:0.7;
-webkit-transform: scale(0.98,0.98);
-moz-transform: scale(0.98,0.98);
-o-transform: scale(0.98,0.98);
transform: scale(0.98,0.98); /* 要素を拡大縮小する この場合はX方向（横）、Y方向（縦）に98%に縮小 */
}
a span {
opacity: 0;
display: block;
width: 100px;
height: 500px; /* 画像のサイズに合わせて少し大きめに作る */
position: absolute;
top: -100px;
left: -200px; /* 画像のサイズに合わせて位置を外側から外側へ */
background: rgba(255, 255, 255, 0.3);
-webkit-transition-property: left, top, opacity;
-moz-transition-property: left, top, opacity;
-ms-transition-property: left, top, opacity;
-o-transition-property: left, top, opacity;
transition-property: left, top, opacity; /* a spanのcssプロパティ left,top,opacityを時間的変化させる */
-webkit-transition-duration: 0.7s, 0.5s, 0.1s;
-moz-transition-duration: 0.7s, 0.5s, 0.1s;
-ms-transition-duration: 0.7s, 0.5s, 0.1s;
-o-transition-duration: 0.7s, 0.5s, 0.1s;
transition-duration: 0.7s, 0.5s, 0.1s; /* 変化にかかる時間を指定 上のプロパティに対応している*/
-webkit-transition-timing-function: ease;
-moz-transition-timing-function: ease;
-ms-transition-timing-function: ease;
-o-transition-timing-function: ease;
transition-timing-function: ease; /* 変化のタイミング・進行割合を指定 easeの場合は開始と完了を滑らかにする */
-webkit-transform: rotate(30deg);
-moz-transform: rotate(30deg);
-ms-transform: rotate(30deg);
-o-transform: rotate(30deg);
transform: rotate(30deg); /* 要素を回転表示 この場合は30度回転させる */
}
a:hover span { /* マウスオーバーした時の光の位置 */
opacity: 1;
top: -50px;
left: 630px;
}
