Skip to content

Instantly share code, notes, and snippets.

@CaelanStewart

CaelanStewart/test-case.html

Created December 17, 2016 15:42
Show Gist options
  • Save CaelanStewart/027f522f17fd3fd05ecf8c5fe001f724 to your computer and use it in GitHub Desktop.
Save CaelanStewart/027f522f17fd3fd05ecf8c5fe001f724 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
test-case.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Test Case</title>
<style>
.box {
position: relative;
display: inline-block;
margin: 10px;
}
.box img {
position: relative;
z-index: 1;
}
.box a {
display: block;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: transparent;
z-index: 1000;
}
.box.workaround a {
background-color: rgba(0, 0, 0, 0);
}
.box a:hover {
background-color: rgba(0, 0, 0, 0.25);
}
</style>
</head>
<body>
<div class="box">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/e/eb/Ash_Tree_-_geograph.org.uk_-_590710.jpg/220px-Ash_Tree_-_geograph.org.uk_-_590710.jpg" alt="" />
<a href="https://www.google.co.uk/"></a>
</div>
<div class="box workaround">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/e/eb/Ash_Tree_-_geograph.org.uk_-_590710.jpg/220px-Ash_Tree_-_geograph.org.uk_-_590710.jpg" alt="" />
<a href="https://www.google.co.uk/"></a>
</div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment