小技をBLOGに集結!

up-down

CSS3の「transform:scale()」でhoverした時に画像を拡大する

CSS3の「transform:scale()」を使用すると要素や画像を拡大・縮小して表示することができます。

画像をマウスオーバーした時にその画像を少し拡大させて表示させるなどをすると、サイトにインパクトのある動きを出すことができるので注目を集められます。

下記にCSS3の「transform:scale()」を使用して画像をマウスオーバーした時に拡大させて表示した時の方法をメモします。

【画像 拡大表示(ブロック固定なし)▼】

 
 
 
 
 
 
 
 

【画像 拡大表示(ブロック固定)▼】

【画像 縮小表示 ▼】

※「transition: all 0.5s linear;」で指定してもOKです。allの場合は全てのプロパティに適用されます。
 
 
HTML

 

CSS

.scale{
	overflow:hidden;
	margin:0 0 20px;
}
.scale img {
    -moz-transition: -moz-transform 0.5s linear;
    -webkit-transition: -webkit-transform 0.5s linear;
    -o-transition: -o-transform 0.5s linear;
    -ms-transition: -ms-transform 0.5s linear;
    transition: transform 0.5s linear;
}
.scale img:hover {
    -webkit-transform: scale(1.2);
    -moz-transform: scale(1.2);
    -o-transform: scale(1.2);
    -ms-transform: scale(1.2);
    transform: scale(1.2);
}

.scale_up {
	width: 400px;
	height: 300px;
	border: 1px solid #CCC;
	overflow: hidden;
}
.scale_up img {
    -moz-transition: -moz-transform 0.5s linear;
    -webkit-transition: -webkit-transform 0.5s linear;
    -o-transition: -o-transform 0.5s linear;
    -ms-transition: -ms-transform 0.5s linear;
    transition: transform 0.5s linear;
}
.scale_up img:hover {
    -webkit-transform: scale(1.2);
    -moz-transform: scale(1.2);
    -o-transform: scale(1.2);
    -ms-transform: scale(1.2);
    transform: scale(1.2);
}

.scale_down {
	width: 400px;
	height: 300px;
	border: 1px solid #CCC;
	overflow: hidden;
}
.scale_down img {
    -moz-transition: -moz-transform 0.5s linear;
    -webkit-transition: -webkit-transform 0.5s linear;
    -o-transition: -o-transform 0.5s linear;
    -ms-transition: -ms-transform 0.5s linear;
    transition: transform 0.5s linear;
}
.scale_down img:hover {
    -webkit-transform: scale(0.8);
    -moz-transform: scale(0.8);
    -o-transform: scale(0.8);
    -ms-transform: scale(0.8);
    transform: scale(0.8);
}

 
 
【表示例】
サンプルページ:【CSS】画像の拡大・縮小表示

「scale()」は下記のようにX方向とY方向で指定することもできます。

transform: scale(1.2,1.2);
また、縮小させて表示させたい場合は(0.8)のように1よりも小さい値を指定します。

サイト内の画像をマウスオーバーした時に動きを出したい場合など色々と利用できそうです。
 

関連記事

  1. marker1
  2. enkei01
  3. 7220032bb1abbfa8d3ffbd64edd01182_s
  4. pelican-puzzle
  5. p_s

最近の記事

  1. wordpress-800x480
  2. marker1

    2019.07.6

    文字装飾
  3. kigou1
  4. 7220032bb1abbfa8d3ffbd64edd01182_s
  5. p_s

スマホやタブレットでも大丈夫!

mb300x142

ポップメディア直営サイト

ポップメディア:Web制作支援
 
〒112-0011東京都文京区千石2-33-10-102
 
URL https://popmedia.jp/
 
TEL:03-6912-08214
 
モバイル:080-3409-4566
 
popmedia
contact-bana
PAGE TOP