JSFiddle - React, Tailwind, and code Playground

HTML

<div class="details-wrap">
  <details class="details js-details">
    <summary class="details-summary js-details-summary"><img src="https://picsum.photos/id/82/880/500/" alt="1つ目のアコーディオンのタイトル" width="880" height="500"></summary>
    <div class="details-content js-details-content">
      <p>ここは、1つ目のアコーディオンの中身です。</p>
    </div>
  </details>
  <details class="details js-details">
    <summary class="details-summary js-details-summary"><img src="https://picsum.photos/id/360/880/500/" alt="2つ目のアコーディオンのタイトル" width="880" height="500"></summary>
    <div class="details-content js-details-content">
      <p>ここは、2つ目のアコーディオンの中身です。</p>
    </div>
  </details>
  <details class="details js-details">
    <summary class="details-summary js-details-summary"><img src="https://picsum.photos/id/239/880/500/" alt="3つ目のアコーディオンのタイトル" width="880" height="500"></summary>
    <div class="details-content js-details-content">
      <p>ここは、3つ目のアコーディオンの中身です。</p>
    </div>
  </details>
  <details class="details js-details">
    <summary class="details-summary js-details-summary"><img src="https://picsum.photos/id/106/880/500/" alt="4つ目のアコーディオンのタイトル" width="880" height="500"></summary>
    <div class="details-content js-details-content">
      <p>ここは、4つ目のアコーディオンの中身です。</p>
    </div>
  </details>
  <details class="details js-details">
    <summary class="details-summary js-details-summary"><img src="https://picsum.photos/id/696/880/500/" alt="5つ目のアコーディオンのタイトル" width="880" height="500"></summary>
    <div class="details-content js-details-content">
      <p>ここは、5つ目のアコーディオンの中身です。</p>
    </div>
  </details>
</div>

SCSS

.details-wrap {
	display: flex;
    justify-content: flex-start;
    align-items: flex-start;
}
.details {
	position: relative;
	width: 20%;
	height: 350px;
	transition: width 0.5s;
	&:hover {
		width: 880px;
	}
}
.details[open] {
	.details-summary{
		&::before {
			display: none;
		}
	}
}
.details-summary {
	display: block;
	position: absolute;
	color: #fff;
	font-size: 18px;
	height: 100%;
	width: 100%;
	text-align: center;
	cursor: pointer;
	&::before {
		content: '';
		background-color: rgba(0, 0, 0, 0.3);
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		display: block;
		z-index: 2;
		}
	&:hover {
		&::before {
			  display: none;
		}
	}
	img {
		position: relative;
		width: 100%;
		height: 100%;
		object-fit: cover;

	}
}
.details-summary::-webkit-details-marker {
	display: none;
 }
.details-content {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	color: #000;
	background-color: #fff;
	padding: 20px;
	z-index: 1;
}

/* 以下の記述は不要です */
body {
  margin: 20px;
}

JavaScript

let accordionDetails = '.js-details';
let accordionSummary = '.js-details-summary';
let accordionContent = '.js-details-content';
let speed = 500;
let timer;

$(accordionDetails).on("mouseenter", function(event) {
  // summaryにis-activeクラスを追加
  $(this).find(accordionSummary).addClass("is-active");
  // selfにthisを格納
  let self = this;
  //時間差で以下の処理を実施
  timer = setTimeout(function() {
    // open属性を付ける
    $(self).attr("open", "true");
    // いったんdisplay:none;してからfadeInで開く
    $(self).find(accordionContent).hide().fadeIn(speed);
  }, 200);
});

$(accordionDetails).on("mouseleave", function(event) {
  // clearTimeoutでタイマーをキャンセル
  clearTimeout(timer);
  // summaryからis-activeクラスを削除
  $(this).find(accordionSummary).removeClass("is-active");
  // selfにthisを格納
  let self = this;
  // アニメーションの完了後にopen属性を取り除く
  $(self).find(accordionContent).fadeOut(speed, function() {
    $(self).removeAttr("open");
  });
});