背景画像の上にマウスオーバーできる要素を組み込みたい

Question

いつもお世話になっております。

あるサイト様のマウスオーバーエフェクトを組み込みたいのですが、
どこから組み込めばいいのかわかりません…。
背景画像の上に重ねておいているとは思うのですが、
どういった技法でやっているのか見当がつかず、アドバイスを頂けたら幸いです。

参考サイト様
https://pogg-sweetpotatopie.com/

実装させたいページ
https://www.rakuten.ne.jp/gold/tokeiten/feature/lukia/index.html
↑画像であたりを入れています。###HR######IMG0f06c8b5503ba4e313df695cc5b5efe7e.jpegIMG0###

Accepted Answer

ECマスターズの伊藤です。

大変お待たせいたしました。


の下に

を追加


style.class　302行目あたり
.scene4-4_back
に
position: relative;
を追加
.scene4-4_back .border01
を追加

＝＝＝＝＝
.scene4-4_back{
  position: relative;
     height: 0;
    /* 表示画像の高さ ÷ 表示画像の幅 × 100 */
    padding-top: 70%;
    background: url(https://www.rakuten.ne.jp/gold/tokeiten/feature/lukia/img/ssqv056.jpg) center center;
    background-size: contain;}

.scene4-4_back .border01{
    border-top : 2px solid #bd3448;
    position: absolute;
    height: 1px;
    width: 24%;
    top: 36%;
    right:20%;
    transform:rotate(150deg);
}
＝＝＝＝＝

こちらで、フルオートカレンダー機能からから画像に
線が引けるようになります。

などを追加していただき
CSSも追加していただきますと
複数線を引くことができます。

CSSについてなど、ご不明な点がございましたら、
ご質問くださいませ。

Answer

ECマスターズの伊藤です。

> 背景画像の上に重ねておいているとは思うのですが、
> どういった技法でやっているのか見当がつかず、アドバイスを頂けたら幸いです。

マウスオーバー時の挙動は
下記の通り記述していただきますと、実装いただけます
＝＝＝＝＝


.sample{
  width: 100px;
  height: 100px;
  border-radius: 50%;
  border: 1px solid gray;
}
.sample:hover{
    background: url(https://pogg.imgix.net/wp-content/themes/pogg/assets/images/index/pie_feature_c.jpg) center center no-repeat;
    background-size: cover;
    -webkit-transform: scale(1.2);
    transform: scale(1.2);
    transition: -webkit-transform .3s,background .3s,box-shadow .3s;
    transition: transform .3s,background .3s,box-shadow .3s;
    transition-timing-function: cubic-bezier(.645,.045,.355,1)
}

＝＝＝＝＝

.sampleで、表示させる領域のデザインを修正していただき
.sample:hoverで、マウスオーバー時の設定を行っています。

ご希望のデザインに合わせて
修正をお願いいたします。

ご不明な点は、ご質問くださいませ。

Answer

教えていただいたコードで実装できました。
ただ、テキストをオーバーで切り替えたときに文字が円内に
おさまりません…。
テキストコードの入れ方が悪いのでしょうか？
また、画像からマウスオーバー部分へ線を引きたいのですが、
上手く反映できず、borderはどのように組み込めば参考サイトのように線が引けるのでしょうか？

お手数おかけしますが、よろしくお願いいたします。

実装させたページ
https://www.rakuten.ne.jp/gold/tokeiten/feature/lukia/index.html

Answer

ECマスターズの伊藤です。

> 教えていただいたコードで実装できました。
> ただ、テキストをオーバーで切り替えたときに文字が円内に
> おさまりません…

テキストを円内に収める方法はございませんので
センタリング＋改行で
ご対応いただくか
画像内にテキストを入れていただくようになります。


また、

> また、画像からマウスオーバー部分へ線を引きたいのですが、
> 上手く反映できず、borderはどのように組み込めば参考サイトのように線が引けるのでしょうか？

こちらの仕組みが難しく、申し訳ございませんが
ご回答までお時間を頂戴したいと思います。

Answer

テキストのほうはセンタリング+改行でなんとか
調整できました。
ありがとうございます！

複雑なことをお聞きして申し訳ございません。
お手数おかけいたしますが、よろしくお願いいたします。

Answer

教えていただき、ありがとうございます！
上記のコードを追加しましたら、無事にボーダー線を引くことが
できました。