<p>hover over it!</p>

<div class="teaser">
	<h3>blend-mode with pseudos</h3>
	<p>Deleniti atque error quidem eaque eligendi ad, pariatur minima quisquam omnis veniam, sint voluptas, a ipsam illum debitis. Voluptatem esse, consectetur qui.</p>
</div>

.teaser {
	backface-visibility: hidden;
	border: 1px solid #ccc;
	border-radius: 3px;
	padding: 1em;
	max-width: 300px;
	overflow: hidden;
	position: relative;
	
	&:before,
	&:after {
		content: '';
		border-radius: 50%;
		display: block;
		width: 300px;
		height: 300px;
		position: absolute;
		right: -150px;
		bottom: -150px;
		transition: all 300ms ease-out;
	}
	
	&:before {
		@supports (mix-blend-mode: difference) {
			background-color: white;
			mix-blend-mode: difference;
		}
		z-index: 1;
		pointer-events: none;
	}
	
	&:after {
		background-color: #e20074;
		@supports (mix-blend-mode: difference) {
			background-color: adjust-hue(#e20074, 180); //#e20074; <- desired color, complementary color does not match exactly
			//filter: hue-rotate(-180deg) brightness(2);
		}
		z-index: -1;
	}
	
	&:hover {
		@supports not (mix-blend-mode: difference) {
			color: white;
		}
		
		&:before,
		&:after {
			transform: scale(3);
		}
	}
}


// defaults
*, *:after, *:before {
	box-sizing: border-box;	
}

body {
	margin: 1em;
}
View Compiled 
/* all you need is CSS */
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.