css overlay

1#overlay {
2  position: fixed; /* Sit on top of the page content */
3  display: none; /* Hidden by default */
4  width: 100%; /* Full width (cover the whole page) */
5  height: 100%; /* Full height (cover the whole page) */
6  top: 0;
7  left: 0;
8  right: 0;
9  bottom: 0;
10  background-color: rgba(0,0,0,0.5); /* Black background with opacity */
11  z-index: 2; /* Specify a stack order in case you're using a different order for other elements */
12  cursor: pointer; /* Add a pointer on hover */
13}

1#hero{
2  background-image:url();
3  background-size:cover;
4  background-position:top center;
5  position:relative;
6}
7
8#hero::after{
9  content:'';
10  position:absolute;
11  left:0;
12  top:0;
13  height:100%;
14  width:100%;
15  background-color:black;
16  opacity:0.7;
17}

1html, body {
2  min-height: 100%;
3}
4
5body {
6  position: relative; /* needed if you position the pseudo-element absolutely */
7}
8
9body:after {
10  content: "";
11  display: block;
12  position: fixed; /* could also be absolute */ 
13  top: 0;
14  left: 0;
15  height: 100%;
16  width: 100%;
17  z-index: 10;
18  background-color: rgba(0,0,0,0.2);
19}
20

1<div class="imagebg" data-overlay="5">
2	<div class="background-image-holder">
3		<img alt="background" src="img/file.jpg" />
4	</div>
5	<div class="container">
6		Content
7	</div>
8</div>
9					

1{% for instance in object_list %}
2    <div align="center">
3        <a href="#overlay{{ instance.pk }}">{{ instance.international_title }}</a>
4    </div>
5    <div id="overlay{{ instance.pk }}">
6    <p>{{ instance.international_short_description }}<p>
7    </div>
8{% endfor %}