BLOG

ブログ

2015.10.21|技術ブログ

CSSでの画像オーバー方法

今までは、画像にオーバーさせる際は何か良いjQueyは無いもんかと
探し回ったもんですが、今の時代はCSSが全て解決してくれます。

動作もjQueryよりもCSSの方が軽くて、アニメーションも滑らかだったというデータも出ています。
CSS万歳!!

画像をフワッと半透明にする

ico_ena

.fade {transition: all 0.3s ease-in-out 0s;}
.fade:hover {background-color: #fff;opacity: 0.5;}

上記のクラスを与えてやれば、軽快にフワッとした動きが画像に付与されます。
めちゃめちゃ便利です。

画像をマウスオーバーしたときに「拡大」する

ico_ena

ワードプレステーマのアイキャッチとかにオーバーした時とかによく見る動きですねコレ。

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

CONTACT

ご質問・ご相談は
お気軽にお問い合わせください。

受付時間:平日 9:30〜18:30(土日祝除く)
※メールは24時間受け付けております。

OSAKA Office大阪本社

〒541-0054 
大阪市中央区南本町1-8-14 
JRE堺筋本町ビル9階
詳細はこちら

TOKYO Office東京支社

〒103-0027 
東京都中央区日本橋2丁目2−3 
RISHEビル4F
詳細はこちら