 |
 |
前号へ
このコーナーでは、テンプレートのカスタマイズについて、実際のサンプルページを元に紹介していきます。
皆さん、こんにちは。おちゃのこネットの刑部です。
今号のデザイン道場は、ショップ各商品写真でも利用している、マウスオーバーで画像をズームする方法をご紹介します。
バナーなどで、利用するだけでアクセントになります。
 |
|
 |
 |
HTMLはご自身で変更してください。
サンプル用にclass名を付けたdivタグを記載しています。
このclass名については、ご自身で変更いただいて結構です。
●HTML
<a href="#">
<div class="zoomimg"><img src="https://cafe-responsive.ocnk.net/data/cafe-responsive/image/20170601_a38d57.jpg" width="400" height="400" alt="写真"></div>
</a>
デザイン管理→スタイルシートの編集から下記の指定をコピーして貼り付けて下さい。
※貼り付け位置は、最下部にお願い致します。
画像の横幅(例では400px)に合わせて横幅を指定ください。
マウスオーバー時の拡大はscaleの値、透過はopacityで変更可能です。
●スタイルシート
.zoomimg {
overflow: hidden;
max-width: 400px;
}
.zoomimg img {
transition-duration: 0.3s;
width: 100%;
}
.zoomimg img:hover {
transform: scale(1.1);
transition-duration: 0.3s;
opacity: 0.6;
}
Copyright (C) 2004-2006 OCHANOKO-NET All Rights Reserved.