お疲れさまです。
VAXだょ。。。。
皆さん今日も元気にカレー食べて頑張ってますか?
僕はここ最近カレーをよく食べる案件がありました。
ここだけにCoco...ではなくおうちのカレーです。
ありがたいです。
さてWebに携わる人は間違いなく目が終わってますよね？
わかります。わかります。
僕はもうずっと終わってます(^^) v
そんな僕がすごく画期的な発見をしたんですよ。
これをみんなに伝えて社会貢献しようと思います。
それは、、、、
ビールの底の丸みがあるとこを上手に目の周りでぐるりとすると
：
：
：
：
なんか気持ちよくないですか？
さらにそのビールも飲んじゃえばすごくいいよね！
やる気もマックスになること間違いなしです。
誰ですか今お腹を見たのは！！！！！
、、、、、、
前置きが長くなりましたが今日のお話は
ちょっと
エフブログの一覧でも使ってる画像とかロールオーバー効果で
なんか画像がズームアップするやつをやってみます。。
できるかな？
仕組み
どうなっているかというと
枠を固定しておいてその中の画像をオンマウス時(:hover)に
transform:scale() …… 要素を拡大・縮小表示する
ということになります。
ただそのままだとでかくなってレイアウトが崩れたりしちゃったりもね。。。
そこで枠だけ固定しておいてはみだした部分は見せないよってことです。
まるで男女の駆け引きみたいですね。
それでは
html
<div class="box">
<img src="○○" >
</div>
css
.box {
width:200px;
height:200px;
overflow:hidden; //はみ出した部分削る 男女の駆け引き
}
.box img {
-webkit-transition: all 0.4s ease-in-out; //0.4秒かけて動かすよ
transition: all 0.4s ease-in-out;
}
.box:hover img {
-moz-transform: scale(1.2,1.2);
-webkit-transform: scale(1.2,1.2);
-o-transform: scale(1.2,1.2);
-ms-transform: scale(1.2,1.2);
}
動きの説明
.boxにオンマウス(:hover) 時に
内包される img を x,y方向に 1.2倍にするんだ！ってものです。
比率は 1.2 の部分を変えて見てください。
scale(数値, 数値)
scale()関数では、2つの数値で2D縮尺比率を指定。
1つ目の数値はX方向、2つ目の数値はY方向の比率です。 2つ目の数値は省略することができますが、この場合には最初の値と同じになります。
ですっっっ。
transformプロパティについてはこちらで勉強してみてください。
他にもたくさん効果があります。
demo
次回こそ Coco壱でお食事券が当たった話をするかもしれません。
