section with image to the right text to the left gradient

section with image to the right text to the left gradient Demo

View Demo Full Screen View Demo New Tab

section with image to the right text to the left gradient Code

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/foundation/6.7.5/css/foundation.min.css" />

<section class="block-section">
	<div class="grid-container">
		<div class="block-section-inner">
			<div class="grid-x grid-padding-x">

				<div class="large-6 cell">
					<div class="block-section-content">
						<p>"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis rutrum sapien non ornare sagittis. Fusce quis dignissim felis. Pellentesque iaculis nisl et est ultricies, id mollis lorem volutpat. Praesent nec nunc vel quam facilisis scelerisque a ut orci. "</p>
					</div>
					<div class="block-section-link">
						<a href='#!'>read more... </a> 
					</div>
				</div>
				<div class="large-6 cell">
					&nbsp;
				</div>

			</div>
		</div>
	</div>
</section>

CSS

/* replace block-section with your own class name */
/* block-section */
.block-section {
  padding:190px 0;
  background:linear-gradient(90deg, rgba(255,255,255,1),rgba(255,255,255,0) ), url("https://i.imgur.com/RFAN7VK.jpeg") center right no-repeat;
  background-size:cover;
}
.block-section-inner {}
.block-section-content {}
.block-section h1 {}
.block-section h2 {}
.block-section p {
  font-style: normal;
  font-weight: bold;
  font-size: 28px;
  line-height: 150%;
  color: #1E1E1E;
  margin-bottom:20px;
}
.block-section-link {}
.block-section-link svg {
  margin-left:5px;
  height:12px;
}
.block-section-link a {
  font-style: normal;
  font-weight: 400;
  font-size: 20px;
  line-height: 22px;
  text-decoration-line: underline;
  color: #444;
}
/* block-section */