SOURCE

<div class="container">
    <ul >
	<li class="story-tile  story-tile-1">
		<img src="https://img01.sogoucdn.com/app/a/07/80f2e20a98944a0fa662d3fc5f472e56" alt="" class="story-tile-img">
		<div class="story-tile-section">
			<h2 class="story-tc-title">title-1</h2>
			<p class="story-tc-content">content-01 很长很长的content</p>
		</div>
	</li>
	<li class="story-tile  story-tile-2">
		<img src="https://img01.sogoucdn.com/app/a/07/80f2e20a98944a0fa662d3fc5f472e56" alt="" class="story-tile-img">
		<div class="story-tile-section">
			<h2 class="story-tc-title">title-2</h2>
			<p class="story-tc-content">content-02</p>
			<p class="story-tc-content">content-02</p>
			<p class="story-tc-content">content-02</p>
			<p class="story-tc-content">content-02</p>
		</div>
	</li>
	<li class="story-tile  story-tile-3">
		<img src="https://img01.sogoucdn.com/app/a/07/80f2e20a98944a0fa662d3fc5f472e56" alt="" class="story-tile-img">
		<div class="story-tile-section">
			<h2 class="story-tc-title">title-3</h2>
			<p class="story-tc-content">content-03</p>
			<p class="story-tc-content">content-03</p>
			<p class="story-tc-content">content-03</p>
			<p class="story-tc-content">content-03</p>
			<p class="story-tc-content">content-03</p>
			<p class="story-tc-content">content-03</p>
		</div>
	</li>
	<li class="story-tile  story-tile-4">
		<img src="https://img01.sogoucdn.com/app/a/07/80f2e20a98944a0fa662d3fc5f472e56" alt="" class="story-tile-img">
		<div class="story-tile-section">
			<h2 class="story-tc-title">title-4</h2>
			<p class="story-tc-content">content-04</p>
			<p class="story-tc-content">content-04</p>
			<p class="story-tc-content">content-04</p>
			<p class="story-tc-content">content-04</p>
			<p class="story-tc-content">content-04</p>
			<p class="story-tc-content">content-04</p>
		</div>
	</li>
	<li class="story-tile  story-tile-5">
		<img src="https://img01.sogoucdn.com/app/a/07/80f2e20a98944a0fa662d3fc5f472e56" alt="" class="story-tile-img">
		<div class="story-tile-section">
			<h2 class="story-tc-title">title-5</h2>
			<p class="story-tc-content">content-05</p>
			<p class="story-tc-content">content-05</p>
			<p class="story-tc-content">content-05</p>
			<p class="story-tc-content">content-05</p>
			<p class="story-tc-content">content-05</p>
			<p class="story-tc-content">content-05</p>
		</div>
	</li>
	<li class="story-tile  story-tile-6">
		<img src="https://img01.sogoucdn.com/app/a/07/80f2e20a98944a0fa662d3fc5f472e56" alt="" class="story-tile-img">
		<div class="story-tile-section">
			<h2 class="story-tc-title">title-6</h2>
			<p class="story-tc-content">content-06</p>
			<p class="story-tc-content">content-06</p>
			<p class="story-tc-content">content-06</p>
			<p class="story-tc-content">content-06</p>
			<p class="story-tc-content">content-06</p>
		</div>
	</li>
</ul>
</div>

* {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
    position: relative;
    border-radius: 0.5rem;
}
.container {
    width: 80vw;
    margin: 0 auto;
}
.story-tile {
    width: 40vw;
    margin-bottom: 4rem;
    list-style: none;
}
.story-tile-img {
    width: 100%;
}
.story-tile-section {
    position: absolute;
    min-width: 40vw;
    right: 1rem;
    padding: 2rem;
    transform: translateX(100%);
    top: 0;
    z-index:-1;
    background: rgba(34, 34, 34, 0.89);
    color: white;
}
.story-tile-section .story-tc-title {
    color: rgb(255, 187, 0);
}
.story-tile-1 .story-tile-section,
.story-tile-3 .story-tile-section,
.story-tile-5 .story-tile-section {
    top: 25%;
}
.story-tile-3 .story-tile-section {
    top: 25%;
}
.story-tile-5 .story-tile-section {
    top: -5%;
}
.story-tile-2, .story-tile-4, .story-tile-6 {
    transform: translateX(100%);
}
.story-tile-2 .story-tile-section,
.story-tile-4 .story-tile-section,
.story-tile-6 .story-tile-section  {
    top: 10%;
    right: -1rem;
    transform: translateX(-100%);
}