以下の構文をコピペして、画像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;
}
}
動作確認はしていますが、何か不具合等ございましたらご連絡くださいませ。