【コピペOK】img透過・hover時ゆっくり変化させるCSS

Pocket

Tweet

ゆっくり変化させるとそれだけでリッチに見えます。

リンクにhoverを追加してそれをゆっくり変化させるCSSをご紹介。

文字リンクをゆっくり変化させる

  a{
	color:#006898;
	text-decoration:none;
	color:#006898;
	text-decoration:none;
	-webkit-transition: 0.3s ease-in-out;
	-moz-transition: 0.3s ease-in-out;
	-o-transition: 0.3s ease-in-out;
	transition: 0.3s ease-in-out;
  }

画像をゆっくり変化させる

a:hover img {
  opacity: 0.8;
  filter: alpha(opacity=80);
  -moz-opacity: 0.8;
  -webkit-transition: 0.3s ease-in-out;
  -moz-transition: 0.3s ease-in-out;
  -o-transition: 0.3s ease-in-out;
  transition: 0.3s ease-in-out;
}