商品画像にカーソルを合わせると拡大表示させる方法

Question

お世話になっております。

以下のページの個別商品にカーソルを合わせると拡大表示させる
方法を知りたいです。
https://www.rakuten.ne.jp/gold/cream-dress/category/cat_one.html

ご教授下さい。

Answer

ECマスターズの伊藤です。

> 以下のページの個別商品にカーソルを合わせると拡大表示させる
> 方法を知りたいです。

下記の通り、記述いただきますと
a タグで囲われた img が
カーソルを合わせたときに
拡大するようになります。

scale(1.1);
画像をどれくらい拡大するか

all 0.8s ease;
拡大するスピード

となっていますので、
ご希望に合わせて修正をお願いします。

各種ブラウザに対応するように
複数記述されていますので
修正の際はご注意くださいませ。


HTML例＝＝＝＝＝＝＝＝＝＝


CSS＝＝＝＝＝＝＝＝＝＝
a:hover img{
    -webkit-transform: scale(1.1);
    -moz-transform: scale(1.1);
    -o-transform: scale(1.1);
    -ms-transform: scale(1.1);
    transform: scale(1.1);
    -webkit-transition: all 0.8s ease;
    -moz-transition: all 0.8s ease;
    -o-transition: all 0.8s ease;
    transition: all 0.8s ease;
}

Answer

伊藤さん

早速のご回答ありがとうございます。

これはゴールドのページでしかできないという認識で正しいでしょうか？

例えば、hover.cssなどのファイルを作成し、それをgold/xxx/index.htmlから
それを参照するなどとするのでしょうか？



CSSについての前提知識があまりないので、具体的にindex.htmlやhover.cssに
どのように書けばよいかご指導いただければ幸いです。

よろしくお願いします。

Answer

ECマスターズの伊藤です。

> これはゴールドのページでしかできないという認識で正しいでしょうか？

商品ページでもご利用いただけます。

商品ページにご登録頂く場合は
CSSをとで
挟んで、記述していただく必要がございます。


> 例えば、hover.cssなどのファイルを作成し、それをgold/xxx/index.htmlから
> それを参照するなどとするのでしょうか？
> 
> 

GOLDでご利用頂く場合は
上記の通りの方法で、もご利用いただけますし

とで挟んで
直接 gold/xxx/index.html などに
記述頂いても、反映することができます。


まとめますと、下記の通りとなります。

・商品ページ
・index.htmlにCSSを直接記述
の場合

以下のCSSを登録＝＝＝＝＝＝＝＝＝＝

a:hover img{
-webkit-transform: scale(1.1);
-moz-transform: scale(1.1);
-o-transform: scale(1.1);
-ms-transform: scale(1.1);
transform: scale(1.1);
-webkit-transition: all 0.8s ease;
-moz-transition: all 0.8s ease;
-o-transition: all 0.8s ease;
transition: all 0.8s ease;
}

以上のCSSを登録＝＝＝＝＝＝＝＝＝＝


・hover.cssを作成する場合

以下をhover.cssに記述＝＝＝＝＝＝＝＝＝＝
a:hover img{
-webkit-transform: scale(1.1);
-moz-transform: scale(1.1);
-o-transform: scale(1.1);
-ms-transform: scale(1.1);
transform: scale(1.1);
-webkit-transition: all 0.8s ease;
-moz-transition: all 0.8s ease;
-o-transition: all 0.8s ease;
transition: all 0.8s ease;
}
以上をhover.cssに記述＝＝＝＝＝＝＝＝＝＝

以下をindex.htmlに記述＝＝＝＝＝＝＝＝＝＝

以上をindex.htmlに記述＝＝＝＝＝＝＝＝＝＝

Answer

伊藤さん

で囲う形で設置します。

ありがとうございました。