佐賀のホームページ制作なら株式会社イン・ザ・コム

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

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

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

b0b71d6c9cffe3ff0403b9c3be3dbf9e

d3e1dae595479d0b6c285bf46aa3b7b8

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

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

この記事が気に入ったら
いいね!しよう

Twitter で

関連する記事

Copyright © IN THE COM .inc All rights recerved.