1

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

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

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

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

$(function() {
  $('.main-contents-image').hover(
    function() {
      $(this).stop().animate({
        "opacity": "0.5"
      });
    },
    function() {
      $(this).stop().animate({
        "opacity": "1"
      });
    }
  );
});
.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%;
}
<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>

これだと、このように文字が重なってしまっています。画像の説明をここに入力

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

1 件の回答 1

2

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

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

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

$(function() {
  $('.main-contents-image').hover(
    function() {
      $(this).stop().animate({
        "opacity": "0.5"
      });
    },
    function() {
      $(this).stop().animate({
        "opacity": "1"
      });
    }
  );
});
.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%;
}
<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>

この質問に回答するには、ログインする必要があります。

求めていた回答ではありませんか? のタグが付いた他の質問を参照する。