【WP 】画像にカーソルを載せた時に少し拡大する効果

やりたい事、よくある画像にマウス矢印をのせた時に、画像が少しずつ拡大アップしてくる効果を付けたい。

---

↓DEMO

---

やり方は超簡単。

テーマの追加CSSに以下のCSSを書き足す。

/* 画像を少し拡大 */
.sup_box{
border-radius: 10px;/* 角丸の指定 */
width:350PX;/* 画像の横幅指定 */
height: 200px;/* 画像の縦幅指定 */
margin:0 auto;
overflow:hidden;/* 横幅からはみ出た部分は非表示 */
}
.sup_box img{
-webkit-transition: 1s ease-in-out;
-moz-transition: 1s ease-in-out;
-o-transition: 1s ease-in-out;
transition: 1s all;/* スピード指定 */
}
.sup_box img:hover{
-moz-transform: scale(1.1,1.1);/* 拡大されいく倍率指定 */
-webkit-transform: scale(1.1,1.1);
-o-transform: scale(1.1,1.1);
-ms-transform: scale(1.1,1.1);
}

次にWordpressの記事の投稿画面に画像を配置し、その画像を選択した状態で右側に出て来る

「ブロック」＞「高度な設定」＞「追加CSSクラス」の枠内にクラスを書き込みます。

サンプルのクラスのまま使うなら、こんな感じに「sup_box」って書き込めばOK（クラスのドットは不要)

CSSに角丸の指定を入れるとより、おもむきある感じになるし、動きがつくとサイトの雰囲気も更にワンランク上がった感じがするのでGOODですね！

超簡単なので試してみてね～♪