動くWebデザイン
アイディア帳

動きを実現する仕組み

CSSのopacityを使い、hoverをしたら画像を透過させる。

HTMLの書き方

1. head終了タグ直前に自作のCSSを読み込みます。

   <link rel="stylesheet" type="text/css" href="css/7-5.css">
   </head>

2. body内の画像リンクを表示させたい場所に以下のHTMLを記載します。

   <div class="opacity"><a href="#"><img src="img/05.jpg" alt=""></a></div>

自作のCSS内の書き方

/*　透過　*/

.opacity img{
	opacity:1;
	transition: .3s ease-in-out;/*移り変わる速さを変更したい場合はこの数値を変更*/
}

.opacity a:hover img{/*hoverした時の変化*/
	opacity:0.8;/*透過具合を変更したい場合はこの数値を変更*/
}