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