63743


プログラミング超初心者なので用語の使い方が間違ってたらすみません。

画像を4つ並べてそれぞれの中央に文字を置き、それぞれをリンクにしたいです。  
加えてマウスオーバーで画像が暗くなるようにしたいです(この部分は、形としては一応できています)。  
こんな感じで、計4つのリンクを作るのが目標です。  
[![画像の説明をここに入力](https://i.stack.imgur.com/yF2MY.jpg)](https://i.stack.imgur.com/yF2MY.jpg)

htmlはこう書きました。(試行錯誤しまくったので必要ないclassやdivがあるかもしれないです)

cssとjsはこう書きました。jQueryでhoverを使って画像を暗くしたかったのですが、画像の上に半透明の黒色フィルターを載せることができなかったので、下に大きく黒色の背景を用意し、画像を透明化することにました。

[code]

    $(function() {
      $('.main-contents-image').hover(
        function() {
          $(this).stop().animate({
            "opacity": "0.5"
          });
        },
        function() {
          $(this).stop().animate({
            "opacity": "1"
          });
        }
      );
    });
[/code]

[code]

    .main-contents {
      margin: 0 10%;
    }
    
    .main-contents-image {
      height: 500px;
      width: 25%;
      object-fit: cover;
      display: block;
      float: left;
      position: relative;
    }
    
    .main-contents-text {
      position: absolute;
      color: red;
    }
    
    .main-contents {
      background-color: black;
      height: 500px;
      width: 80%;
    }
[/code]

[code]

    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <div class="main-contents">
      <div class="main-contents-box">
        <a href="#">
          <img src="../img/adfg.jpg" alt="" class="main-contents-image">
          <span style="display: block;" class="main-contents-text">○○について</span>
        </a>
      </div>
      <div class="main-contents-box">
        <a href="#" class="main-contents-item">
          <img src="../img/bxfxs.jpg" alt="" class="main-contents-image">
          <span style="display: block;" class="main-contents-text">××について</span>
        </a>
      </div>
      <div class="main-contents-box">
        <a href="#" class="main-contents-item">
          <img src="../img/ehts.jpg" alt="" class="main-contents-image">
          <span style="display: block;" class="main-contents-text">△△について</span>
        </a>
      </div>
      <div class="main-contents-box">
        <a href="#" class="main-contents-item">
          <img src="../img/srth.jpg" alt="" class="main-contents-image">
          <span style="display: block;" class="main-contents-text">□□について</span>
        </a>
      </div>
    </div>
[/code]

これだと、このように文字が重なってしまっています。[![画像の説明をここに入力](https://i.stack.imgur.com/mgbhu.jpg)](https://i.stack.imgur.com/mgbhu.jpg)

親が一番左の画像のみになってるからだと思うのですが、複数でやる場合はどうすればいいのでしょうか…？  
それと、hoverで画像を暗くする方法も、より良いものがあれば教えていただきたいです。


CC BY-SA 4.0
2020-03-10T16:18:49.067
63741
2020-03-10T18:48:40.803
2020-03-10T18:42:29.647
32986
38060
question
html jquery css
画像の上に文字があるリンクを作りたい


この問題は、画像に重ねている文字に指定している `position: absolute` が **同一の要素** (ここでは `body` 要素)
**における相対配置となっている** ために発生しています。

横並びにしたい対象は画像だけでなく、それらに重ねる文字も含まれているため、横並びにするために適用している `float` プロパティなどを `.main-
contents-box` クラスへ移動します。ここで、 `.main-contents-box` クラスには `position: relative`
も設定されることになります。これにより、絶対位置指定の要素が `.main-contents-box` クラスの要素に対して相対配置されるようになります。

そして子要素の高さを親要素に合わせるために `height` プロパティや `display`
プロパティを適宜適用することで、最終的なコードは以下のようになります。

[code]

    $(function() {
      $('.main-contents-image').hover(
        function() {
          $(this).stop().animate({
            "opacity": "0.5"
          });
        },
        function() {
          $(this).stop().animate({
            "opacity": "1"
          });
        }
      );
    });
[/code]

[code]

    .main-contents {
      margin: 0 10%;
      background-color: black;
      height: 500px;
      width: 80%;
    }
    
    .main-contents-box {
      height: 500px;
      width: 25%;
      object-fit: cover;
      display: block;
      float: left;
      position: relative;
    }
    
    .main-contents-text {
      position: absolute;
      color: red;
      top: 0;
    }
    
    .main-contents-box>a {
      display: block;
      height: 100%;
    }
    
    img {
      width: 100%;
      height: 100%;
    }
[/code]

[code]

    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <div class="main-contents">
      <div class="main-contents-box">
        <a href="#">
          <img src="https://placehold.jp/ffa/ffffff/150x150.png?text=%20" alt="" class="main-contents-image">
          <span style="display: block;" class="main-contents-text">○○について</span>
        </a>
      </div>
      <div class="main-contents-box">
        <a href="#" class="main-contents-item">
          <img src="https://placehold.jp/faf/ffffff/150x150.png?text=%20" alt="" class="main-contents-image">
          <span style="display: block;" class="main-contents-text">××について</span>
        </a>
      </div>
      <div class="main-contents-box">
        <a href="#" class="main-contents-item">
          <img src="https://placehold.jp/faa/ffffff/150x150.png?text=%20" alt="" class="main-contents-image">
          <span style="display: block;" class="main-contents-text">△△について</span>
        </a>
      </div>
      <div class="main-contents-box">
        <a href="#" class="main-contents-item">
          <img src="https://placehold.jp/aff/ffffff/150x150.png?text=%20" alt="" class="main-contents-image">
          <span style="display: block;" class="main-contents-text">□□について</span>
        </a>
      </div>
    </div>
[/code]


CC BY-SA 4.0
2020-03-10T18:48:40.803
63743
2020-03-10T18:48:40.803
32986
63741
answer