Skip to content

Instantly share code, notes, and snippets.

@bastjan

bastjan/overlay_css_before_selector.html

Last active December 26, 2015 19:39
Show Gist options
  • Save bastjan/7202394 to your computer and use it in GitHub Desktop.
Save bastjan/7202394 to your computer and use it in GitHub Desktop.
Download ZIP
overlay with html5 css :before selector
Raw
overlay_css_before_selector.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>:before Test</title>
<style type="text/css">
.block {
width: 150px;
height: 150px;
background-color: red;
margin: 10px;
display: inline-block;
}
.overlayed {
position: relative;
}
.overlayed:before {
content: "";
display: block;
background-color: rgba(0, 0, 0, 0.5);
position: absolute;
width: 100%;
height: 100%;
background-image: url(http://www.ajaxload.info/cache/FF/FF/FF/00/00/00/1-1.gif);
background-position: center;
background-repeat: no-repeat;
}
</style>
</head>
<body>
<div class="block">Test</div>
<div class="block overlayed">Test2</div>
<div class="block">
<div style="background-color: lightblue;">Test</div>
</div>
<div class="block overlayed">
<div style="background-color: lightblue;">Test</div>
</div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment