<div class="support-css-excludes"></div>

<div class="container">
	<h3>Multiple Exclusions</h3>
	<div class="wrap-flow-max">
		<span>Lorem ipsum dolor sit amet consectetur adipisicing elit. Nesciunt, nostrum vel commodi voluptatem harum molestiae quasi atque incidunt. Debitis iste non maiores! Quis laboriosam maxime vitae molestias veritatis porro quam.</span>
		<div class="img">
			<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/392/coffee-mug.png" alt="">
		</div>
		<span>Lorem ipsum dolor sit amet consectetur adipisicing elit. Nesciunt, nostrum vel commodi voluptatem harum molestiae quasi atque incidunt. Debitis iste non maiores! Quis laboriosam maxime vitae molestias veritatis porro quam.</span>
		<div class="img">
			<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/392/coffee-mug.png" alt="">
		</div>
		<span>Lorem ipsum dolor sit amet consectetur adipisicing elit. Nesciunt, nostrum vel commodi voluptatem harum molestiae quasi atque incidunt. Debitis iste non maiores! Quis laboriosam maxime vitae molestias veritatis porro quam.</span>
		<span>Lorem ipsum dolor sit amet consectetur adipisicing elit. Nesciunt, nostrum vel commodi voluptatem harum molestiae quasi atque incidunt. Debitis iste non maiores! Quis laboriosam maxime vitae molestias veritatis porro quam.</span>
		<span>Lorem ipsum dolor sit amet consectetur adipisicing elit. Nesciunt, nostrum vel commodi voluptatem harum molestiae quasi atque incidunt. Debitis iste non maiores! Quis laboriosam maxime vitae molestias veritatis porro quam.</span>
	</div>
</div>
// --------------------------------
// Global
// --------------------------------

.container {
	// -------demo only--------- //
	max-width: 800px;
	margin: auto;
	line-height: 1.5;
}

div[class*="wrap"] {
	// -------required--------- //
	position: relative;
}


// --------------------------------
// Demo Specific
// --------------------------------

.wrap-flow-max .avatar {
	-ms-wrap-flow: maximum;
}


.img {
	// ------- required
	position: absolute;
}

.img:nth-of-type(1) {
	top: 20%;
	left: calc(30% - 100px);
	opacity: 0.2;
}

.img:nth-of-type(2) {
	top: 20%;
	left: calc(30% - 50px);
	opacity: 0.6;
}

External CSS

  1. https://codepen.io/tutsplus/pen/ZpvWBO

External JavaScript

This Pen doesn't use any external JavaScript resources.