Before Afterに画像を追加する方法

1. HTMLとCSSを使用する方法: a. まず、Before Afterを表示するためのコンテナー要素を作成します。例えば、div要素を使用します。 b. コンテナー要素に2つのimg要素を追加します。それぞれのimg要素には、比較したい2つの画像のソースを指定します。 c. CSSを使用して、コンテナー要素とimg要素のスタイルを設定します。例えば、コンテナー要素にはposition:relative;を、img要素にはwidth:100%;を設定します。 d. CSSの:beforeまたは:after疑似要素を使用して、2つの画像を重ねる効果を作成します。具体的な方法は以下のコード例を参照してください。

<div class="before-after-container">
  <img src="before.jpg" alt="Before Image">
  <img src="after.jpg" alt="After Image">
</div>

.before-after-container {
  position: relative;
}
.before-after-container:before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 50%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 1;
}

2. JavaScriptを使用する方法: a. HTMLに2つのimg要素を追加します。それぞれのimg要素には、比較したい2つの画像のソースを指定します。 b. JavaScriptを使用して、2つの画像をオーバーレイする方法を作成します。具体的な方法は以下のコード例を参照してください。

<div class="before-after-container">
  <img src="before.jpg" alt="Before Image">
  <img src="after.jpg" alt="After Image">
</div>

const container = document.querySelector('.before-after-container');
const overlay = document.createElement('div');
overlay.classList.add('overlay');
container.appendChild(overlay);
container.addEventListener('mousemove', handleMouseMove);
function handleMouseMove(event) {
  const containerWidth = container.offsetWidth;
  const mouseX = event.pageX - container.offsetLeft;
  const overlayWidth = (mouseX / containerWidth) * 100;
  overlay.style.width = overlayWidth + '%';
}