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

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からそれを参照するなどとするのでしょうか？<link rel="stylesheet" type="text/css" href="hover.css">CSSについての前提知識があまりないので、具体的にindex.htmlやhover.cssにどのように書けばよいかご指導いただければ幸いです。よろしくお願いします。

Answer

ECマスターズの伊藤です。> これはゴールドのページでしかできないという認識で正しいでしょうか？商品ページでもご利用いただけます。商品ページにご登録頂く場合はCSSをで挟んで、記述していただく必要がございます。> 例えば、hover.cssなどのファイルを作成し、それをgold/xxx/index.htmlから> それを参照するなどとするのでしょうか？> > GOLDでご利用頂く場合は上記の通りの方法で、もご利用いただけますしで挟んで直接 gold/xxx/index.html などに記述頂いても、反映することができます。まとめますと、下記の通りとなります。・商品ページ・index.htmlにCSSを直接記述の場合以下のCSSを登録＝＝＝＝＝＝＝＝＝＝以上の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

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

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

カテゴリーから探す