スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

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

画像リンクにカーソルを乗せると半透明になるようにしているサイトをよく見かけます。薄くなりすぎるのはあまり好きではないので半透明以外にいい方法がないか色々と考えてみました。

css-img-link.png

画像がリンクになっているか確認するためには当然カーソルを乗せる必要があります。カーソルを乗せたとき、画像が半透明になって見えにくい場合、カーソルを画像から外します。私はそんなひと手間が面倒に感じます。

確かに画像がリンクであることを示すために何か変化をつける必要があると思います。その変化は半透明ではない方がよいのではと私は思います。ひょっとしたら気付いていない大切なメリットがあるのかな。

画像リンクにカーソルを乗せると、何も指定しなくてもポインタになります。文字リンクと同じです。それだけで十分かもしれませんが、画像リンクにマウスを乗せたときの動きを考えてみました。

ちなみに、写真は和歌山市にある不老橋という橋です。

半透明になる

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

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

さいごに

ということで、画像にマウスを乗せたときの動きについて色々考えてみました。

CSS3を使うものもあるので、ブラウザによっては対応していません。けど、マウスを乗せたときにポインタになるだけでリンクであるということは分かりますので、旧ブラウザのことはあまり気にせず考えました。

ちょっとしたアクセントになると思いますので、お役に立てればうれしいです。

フィードやTwitterで最新情報をチェック
follow us in feedly
この記事に付いているタグの最新記事一覧
loading...
コメント
「ピカッと光る」ですが、transitionを
a:hover:after {}の中に書けば戻ってこなくなりますよ。
【2014/09/12 17:07】 | - #25wNQZMk | [edit]









※コメントはご意見ご感想や間違いのご指摘等にしていただけますようお願いいたします。コメントを確認する時間がなく、技術的なご質問をいただいても答えできません。申し訳ございませんがご理解のほどお願いいたします。

Recent Entry
Popular Entry
  • このエントリーをはてなブックマークに追加
  • このエントリーをはてなブックマークに追加
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。