CSSで画像リンクにマウスを乗せたときの動きを考えてみた

半透明になる

マウスを乗せると半透明になります。これだとマウスを乗せたときに画像が見にくくなります。半透明にするなら、半透明になったことが分かって、かつ、薄くて見えにくくならない数値を指定する必要があると思います。どれくらいだろう？

a img{
  opacity: 1;
  transition: 0.3s;
}
a:hover img{
  opacity: .5;
}

ちょっと上に移動する

ちょっと上に移動するだけでも十分変化をつけることができます。

a img{
  padding: 1px 0 0 0;
}
a:hover img{
  padding: 0 0 1px 0;
}

画像の外に枠が現れる

このブログで使っている方法です。paddingで間隔を取って、そこの色を変えています。元からある枠は要らないという人もいるかも。

a img {
  padding: 3px;
  border: 1px solid #ccc;
  transition: 0.3s;
}
a:hover img{
  border: 1px solid #f58e7e;
  background: #f58e7e;
}

内側に枠が現れる

画像の内側に枠が現れます。簡単そうでちょっと難しいです。floatを使いますのでその後の要素で回りこみを解除する必要があります。

transitionを使いたくなるところですが、カタカタ動くので使えないです。transitionを使う場合は、次で紹介する疑似要素を使った方法を使いましょう。

a img ,a{
  border: 0;
  overflow: hidden;
  float: left;
}
a:hover{
  border: 5px solid #f58e7e;
}
a:hover img{
  margin: -5px;
}

内側の枠が広がって現れる

疑似要素で枠を付けると、自由度は一気に増します。transitionも使えます。まずは、中心から広がるように枠が現れます。

擬似要素はIE7以下で、RGBaカラーはIE8以下で、transitionはIE9以下では対応していません。RGBaカラーは6桁のカラーコードに変えれば問題ないですが、擬似要素とtransitionは仕方ないです。マウスを乗せるとポインタにはなってリンクであることは分かるので、私は古いIEなんて気にしないです。プログレッシブエンハンスメントということで。

もう1つのポイントはbox-sizingです。box-sizingについては以下の記事もご参考に。

box-sizingを使うことで、擬似要素をborder含めた横幅を100%にしています。box-sizingはIE7以下では対応していませんが、そもそもIE7は擬似要素もダメなのでここでは気にしません。

a {
  position: relative;
  overflow: hidden;
  float: left;
}
a img{
  vertical-align: bottom;
}
a:after {
  position: absolute;
  z-index: 9999;
  content: "";
  top: 50%;
  left: 50%;
  width: 0%;
  height: 0%;
  transition: 0.2s;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}
a:hover:after {
  top: 0%;
  left: 0%;
  width: 100%;
  height: 100%;
  border: 10px solid rgba(0,0,0,.3);
}

内側の枠が回転しながら現れる

今度は回転して枠が現れます。

a {
  position: relative;
  overflow: hidden;
  float: left;
}
a img{
  vertical-align: bottom;
}
a:after {
  position: absolute;
  z-index: 9999;
  content: "";
  top: 50%;
  left: 50%;
  width: 0%;
  height: 0%;
  -moz-transform: rotate(45deg);
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
  transition: 0.2s;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}
a:hover:after {
  top: 0%;
  left: 0%;
  width: 100%;
  height: 100%;
  border: 10px solid rgba(0,0,0,.3);
  -moz-transform: rotate(0deg);
  -webkit-transform: rotate(0deg);
  transform: rotate(0deg);
}

ピカッと光る

擬似要素を作った半透明のボックスが左から右へすり抜けることで光っているような感じにします。マウスを外したときに戻ってこない方がいいと思ったけど、やり方が思いつかなかった。

a {
  position: relative;
  overflow: hidden;
  float: left;
}
a:after {
  position: absolute;
  z-index: 9999;
  content: "";
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: rgba(255,255,255,.2);
  transition: 0.1s;
}
a:hover:after {
  left: 100%;
}

矢印が現れる

擬似要素を使って真ん中に矢印を表示します。画像の邪魔になってしまうので、半透明にしてみました。beforeで矢印を、afterで長方形を作っています。

a {
  position: relative;
  overflow: hidden;
  float: left;
}
a:hover:before{
  display: block;
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  margin-top: -40px;
  border: 40px solid transparent;
  border-left-color: rgba(0,0,0,.5);
}
a:hover:after{
  display: block;
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 30px;
  height: 40px;
  margin-top: -20px;
  margin-left: -30px;
  background: rgba(0,0,0,.5);
}

矢印が横から現れる

先ほどの矢印が右から現れます。

a {
  position: relative;
  overflow: hidden;
  float: left;
}
a:before{
  display: block;
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  width: 0;
  height: 0;
  margin-top: -40px;
  margin-left: -40px;
  border: 40px solid transparent;
  border-left-color: rgba(0,0,0,.5);
  transition: 0.1s;
}
a:after{
  display: block;
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  width: 30px;
  height: 40px;
  margin-top: -20px;
  margin-left: -70px;
  background: rgba(0,0,0,.5);
  transition: 0.1s;
}
a:hover:before, a:hover:after{
  left: 50%;
}
a:hover:before{
  margin-left: 0;
}
a:hover:after{
  margin-left: -30px;
}