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

最新更新日：2015年12月31日(木曜日)

公開日：2014年11月14日(金曜日)

Pocket

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

リンクに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;
}