マウスオーバーを使用して説明ごと画像を切り替える方法について

概要:

作成中の自著において使用する予定です。

マウスオーバーを使用して説明ごと画像を切り替える方法について

anbrosia 19 Mar 2024 05:59

作成予定の 自著 で使用する予定です。調べても分かりませんでした。

有識者の方に教えて貰いたいです。

構文提供

AF_XLI 19 Mar 2024 08:36

以下の構文をコピペして、画像1/画像2/説明1/説明2の4箇所を適切に変更してください。

[[module css]]
.hover {
  position: relative;
}

.hover :is(.before, .after) {
  transition: opacity 1s;
}

.hover .before:hover {
  opacity: 0;
}

.hover .after {
  opacity: 0;
  position: absolute;
  top: 0;
  left: 0;
}

.hover .after:hover {
  opacity: 1;
}
[[/module]]

[[div class="scp-image-block block-right scp-clear-true" style="width:300px;"]]
[[div class="hover"]]
[[div class="before"]]
[[image 画像1 style="width:300px;"]]
[[div class="scp-image-caption" style="width:300px;"]]
説明1
[[/div]][[/div]]
[[div class="after"]]
[[image 画像2 style="width:300px;"]]
[[div class="scp-image-caption" style="width:300px;"]]
説明2
[[/div]][[/div]][[/div]][[/div]]

また、同ページ内で別の画像ブロックを使用していない場合はModule CSS内に以下の内容をコピペしてください。

.scp-image-block .block-right {
  clear: right;
  float: right;
  margin: 0 1em 1em 1em;
}

@media (max-width: 900px) {
  .scp-image-block :is(.block-left, .block-right) {
    max-width: 100%;
  }

  .scp-clear-true.scp-image-block {
    clear: both;
    float: none;
    margin-left: auto;
    margin-right: auto;
    width: 100% !important;
 }
}

動作確認はしていますが、何か不具合等ございましたらご連絡くださいませ。

最後の編集 19 Mar 2024 08:52 by AF_XLI さらに表示

Re: 構文提供

anbrosia 19 Mar 2024 10:34

できました！ありがとうございます！