技術ブログ 2015.10.21
CSSでの画像オーバー方法
今までは、画像にオーバーさせる際は何か良いjQueyは無いもんかと
探し回ったもんですが、今の時代はCSSが全て解決してくれます。
動作もjQueryよりもCSSの方が軽くて、アニメーションも滑らかだったというデータも出ています。
CSS万歳!!
画像をフワッと半透明にする
.fade {transition: all 0.3s ease-in-out 0s;} .fade:hover {background-color: #fff;opacity: 0.5;}
上記のクラスを与えてやれば、軽快にフワッとした動きが画像に付与されます。
めちゃめちゃ便利です。
画像をマウスオーバーしたときに「拡大」する
ワードプレステーマのアイキャッチとかにオーバーした時とかによく見る動きですねコレ。
htmlはこんな感じ
<div class="img-kakudai"> <img src="" alt="" /> </div>
センスの欠片も無いクラス名で申し訳ないです。
.img-kakudai { width: 450px; height: 450px; overflow: hidden; } .img-kakudai img { transition: 0.8s; } .img-kakudai img:hover { -o-transform: scale(1.1,1.1); -ms-transform: scale(1.1,1.1); -moz-transform: scale(1.1,1.1); -webkit-transform: scale(1.1,1.1); }