CSSでマウスオーバー時に画像を拡大・縮小する

ランディングページの作成などで画像に少し変化が欲しい時に役立ちます。
CSSの追記で画像を拡大・縮小する方法をご紹介します。

▼html
画像を配置する箇所をhtmlに記述します。ここでは、
class=”image_mouseover_1″と設定。

<div class=”image_mouseover_1″>画像の指定</div>

▼画像拡大 CSS設定

.image_mouseover_1 {
overflow: visible;
width: 100%;
height: 100%;
}
.image_mouseover_1 img {
display: block;
transition-duration: 0.5s;
}
.image_mouseover_1 img:hover {
transform: scale(1.2,1.2);
transition-duration: 0.5s;
}

  • visible 拡大時、はみ出た部分も表示
  • width 画像のヨコサイズ
  • height 画像のタテサイズ
  • block コンテンツのひとかたまりとなる要素
  • transition-duration 変化にかかる時間
  • transform: scale(1.2,1.2) 画像の拡大率

    ( )は2つの数値で縮尺比率を指定。 1つ目の数値はX方向、2つ目の数値はY方向の比率で、カンマで区切ります。 2つ目の数値を省略する場合は最初の値と同じになります。上記の場合120%拡大に指定。

▼画像縮小 CSS設定

.image_mouseover_2 {
overflow: visible;
width: 100%;
height: 100%;
}
.image_mouseover_2 img {
display: block;
transition-duration: 0.5s;
}
.image_mouseover_2 img:hover {
transform: scale(0.7);
transition-duration: 0.5s;
}

  • transform: scale(0.7) 画像の拡大率
    上記の場合70%縮小に指定。
▼画像縮小/画像サイズ固定 CSS設定

.image_mouseover_3 {
overflow: hidden;
width: 100%;
height: 100%;
}
.image_mouseover_3 img {
display: block;
transform: scale(1.5);
transition-duration: 0.5s;
}
.image_mouseover_3 img:hover {
transform: scale(1);
transition-duration: 0.5s;
}

  • hidden 拡大時、はみ出た部分を隠す
  • img:hover 画像のマウスオーバー時
    上記の場合150%から100%への縮小に指定。
▼画像拡大/画像サイズ固定/明るく CSS設定

.image_mouseover_4 {
overflow: hidden;
width: 100%;
height: 100%;
background: #fff;
}
.image_mouseover_4 img {
display: block;
transition-duration: 0.5s;
}
.image_mouseover_4 img:hover {
transform: scale(1.5);
transition-duration: 0.5s;
opacity: 0.6;
}

  • background: #fff 画像の背景を白に指定
  • opacity: 0.6 透明度
    透明度は、0.0(完全に透明)〜1.0(完全に不透明)の数値で指定。