How-to-Create-CSS-Clip-Path-Maker-Hover-Effect/index.html at master · Rajacharles/How-to-Create-CSS-Clip-Path-Maker-Hover-Effect · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>CSS Clip Path Hover Effect</title>
	<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>

	<div class="promo" style="--overlay-color: hotpink">
		<div class="image-wrapper"> <img src="images/bg-1.jpg" alt=""> </div>
		<h2 class="title" data-cta="Get out there →">Nightlife</h2>
	</div>

	<div class="promo" style="--overlay-color: darkgray">
		<div class="image-wrapper"> <img src="images/bg-2.jpg" alt=""> </div>
		<h2 class="title" data-cta="Find yours →">Quiet Time</h2>
	</div>

	<div class="promo" style="--overlay-color: dodgerblue">
		<div class="image-wrapper"> <img src="images/bg-3.jpg" alt=""> </div>
		<h2 class="title" data-cta="Grab a board →">Surf's Up !</h2>
	</div>

	<div class="promo" style="--overlay-color: darkgreen">
		<div class="image-wrapper"> <img src="images/bg-4.jpg" alt=""> </div>
		<h2 class="title" data-cta="Take a walk →">Daylight</h2>
	</div>

</body>
</html>