SVG Mask

by MaestroALF

HTML

<!doctype html>
<html lang="ru">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>SVG Mask</title>
</head>

	<body>
		<div class="car">
			<img class="car__image" alt="" src="http://pashnin.ru/work/svg_mask/car_image.png" />
			<svg class="car__mask" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 280 240">
				<polygon class="car__van" points="87.29 96.75 87 78 183.13 22.88 244.42 58 244.58 112.08 149 166.5 143.25 163.56 143.25 125.19 91.58 95.63 87.29 96.75" opacity="0.5"/>
			</svg>
		</div>
	</body>
</html>

CSS

.car {
	position: relative;
	}
.car__image {
	width: 100%;
	height: auto;
	}
	
.car__mask {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	}
	
.car__van:hover {
	opacity: 0.7
	}