口で説明しづらいのですが、最近よく見かけるこれです。
↓ マウスカーソルあわせてみてください。
マウスオーバーのエフェクトなので、スマフォからは見れませんが、PCでマウスを乗せるとボタンの画像がﾆｭｯと拡大するエフェクトがついています。jsかと思いきや、CSSでも簡単に付けることができます。
ざっくり説明すると、ﾆｭｯとしたい画像をdivなどでくくって、「:hover」した際に画像のscaleを大きくするという手順です。
HTML
|
1 2 3 4 5 |
<div id="demo"> <a href="#"> <img src="01.jpg" alt=""> </a> </div> |
CSS
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
#demo{ display:block; width:250px; height:250px; overflow:hidden; } #demo a:hover img{ -webkit-transform: scale(1.2); -moz-transform: scale(1.2); transform: scale(1.2); -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; transition: all 0.3s ease; } |
親要素のdivには overflow:hidden; を付けます。無いと領域から画像がはみ出てしまうので注意。
ベンダープレフィックスが沢山ついているので見づらいですが、aタグに:hoverした時に、imgに「transform: scale(1.2);」を付与して、1.2倍に拡大しています。
「transition: all 0.3s ease;」は0.3秒かけて変化させる、アニメーションの指定です。
opacityなど、一緒にかけても良いかもしれません。
とても簡単ですね。
ボタンの、文字部分のscaleはそのままにしたい場合
こちらも意外と簡単です。HTML
|
1 2 3 4 5 6 |
<div id="demo"> <a href="#"> <img src="01.jpg" alt=""> <div class="word">会社概要</div> </a> </div> |
CSS
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 |
#demo{ display:block; width:250px; height:250px; border:#DDD solid 2px; overflow:hidden; position:relative; } #demo .word{ display:block; background:#006; color:#FFF; font-size:16px; text-align:center; padding:10px; height:20px; width:230px; position:absolute; left:0; bottom:0; z-index:3; } #demo a:hover img{ -webkit-transform: scale(1.2); -moz-transform: scale(1.2); transform: scale(1.2); -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; transition: all 0.3s ease; } |
親要素のdivに「position:relative;」が追加されたのと、文字部分のCSSが追加されました。
※position:absolute;と言えば、絶対位置を指定して配置するやり方かと思うのですが、親要素にposition:relative;をつけると、親要素の左上の座標を基準として配置することができます。
今回の場合は親の#demoにposition:relative;、子要素の.wordにposition:absolute;bottom:0;をつけていますので、.wordが#demoの下付きになっています。意外と知らなかったりするので小ワザをメモ。
とても簡単ですがサイトに動きを出す際に便利ですので、是非お試しあれ。
