技術ブログ 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);
}