ボタンにロールオーバーで離れた場所にある画像を拡大する

Question

今回は、ページ内に設置したボタンにロールオーバーすると離れた場所にある画像が拡大するようにしたいです。

cssのtransform:scaleでできると思ったのですが、今回はボタンの場所と画像の位置が離れているのでおそらくjavascriptが必要なのだと思い質問いたしました。
onmouseoverでいろいろ試したのですが、マウスオーバーしたもの自体が拡大するものはあるのですが、離れた場所にあるボタンをマウスオーバーで拡大するものが探せませんでした。色々試すために簡単なhtmlとcssだけ用意し、試したので、そちらのコードだけ載せます。本当に本当にJavascriptは分からず、コピペレベルなのでどなたかアイディアをお教えいただけると助かります。

<div class="button">button</div>
  <div class="img"><img src="https://placehold.jp/150x150.png" alt="dummy"></div>

  .button {
    margin-bottom: 10px;
    text-align: center;
    width: 200px;
    padding: 5px;
    background-color: #000;
    color: #fff;
  }
  .button:hover {
    background-color: #373737;
    color: #fff;
  }

Comments

[toutou]

javascriptが必要だとおもったのならまず、javascriptで何ができるかの把握が大事だと思います。調べてある程度サンプルなどをいじってみてからがスタート地点かと。onmouseoverでいろいろ試したとありますが、その際のコードなどを乗せてアドバイスを受けたほうがいいです。htmlとcssだけ乗せられてjavascriptはどうすればいいですかというのは、丸投げかと思います。

Answer 1

CSSのみのやり方はすでに提示いただいているみたいなので、
javascriptとCSSを使ったやり方を書きます。

<div class="button" id="button">button</div>
<br />
<br />
<br />
<div class="img" id="img"><img src="https://placehold.jp/150x150.png" alt="dummy"></div>

.button{/*ボタンのスタイリングのみ*/
  width:100px;
  height:50px;
  border-radius:10px;
  background:#000;
  color:#fff;
  text-align:center;
}

.hover{
  transform-origin:left top;
  transform:scale(2,2);
}
 

var btnObj = document.getElementById('button');
var imgObj = document.getElementById('img');

btnObj.addEventListener('mouseover',function(){
  imgObj.classList.add('hover');
})

btnObj.addEventListener('mouseout',function(){
  imgObj.classList.remove('hover');
})

【参考】
https://codepen.io/chieeeeno/pen/ZegVPJ

上記はあえてjQueryを使わないやり方を書きましたが、
jQueryを使ったら下記のように簡潔に書く事もできます。

$('#button').on('mouseover mouseleave',function(){
  $('#img').toggleClass('hover')
})

【参考】
https://codepen.io/chieeeeno/pen/YZmBzb

Comments

[Yucchi]

御返答ありがとうございます！私のような丸投げ状態の質問にお答えいただき本当に感謝しています。Javascriptに関しては本当に無知で、試したコードも今回やりたかったこととは程遠く、何を載せれば良いのかもわからず、今回の質問に関しては厳しい意見も頂いていて返答を得られないと思っておりました。本当にありがとうございます。

Answer 2

ボタンがdivだとして、そのsiblingで参照できるのであればcssでいけるかもしれません

<style>
.button {
  margin-bottom: 10px;
  text-align: center;
  width: 200px;
  padding: 5px;
  background-color: #000;
  color: #fff;
}
.button:hover {
  transform:scale(1.2,1.2);
  background-color: #373737;
  color: #fff;
}
.button:hover ~ .img img{
  transform:scale(1.2,1.2);
}

</style>

<div class="button">button</div>
<div>test</div>
<div>test</div>
<div>test</div>
<div>test</div>
<div class="img"><img src="https://placehold.jp/150x150.png" alt="dummy"></div>

Comments

[Yucchi]

御返答ありがとうございます！一度デザインを決めて両方試してみようと思います。また後ほど何か不明点があった場合ご質問させていただきます！