Encountering difficulties with a CSS-triggered overlay has left me frustrated. While the solution seems to be functioning adequately in Chrome, it is exhibiting minor issues in Firefox and proving completely nonfunctional in Internet Explorer.
In Firefox, the main issue arises with the :active property. It requires me to hold the mouse button down for 1-2 seconds in order to keep the overlay visible, whereas in IE, the overlay doesn't appear at all.
The HTML markup I'm working with is as follows:
<a href="#" id="aftermath" title="Mark Nielsen's 3D computer animation project developed at Aalborg Media College">
<article class="three columns">
<h1>
Aftermath
</h1>
<img src="images/aftermath-video.jpg" class="resize" alt="3D computer animation project by Mark Nielsen" />
</article>
</a>
<div class="infobox" id="aftermathinfo">
<article>
<h1>
Aftermath
</h1>
<p class="truncate">This was the result of the "free project" from my stay at Media College Aalborg. Sebastian Baasch and I modelled this from a picture of an old army Jeep and did everything else ourselves. Besides modelling the Jeep and various objects in the landscape I also did all 2D graphics, editing and post effects.</p>
<p><a href="posts/aftermath-video.aspx" class="important-link" title="Mark Nielsen's 3D computer animation project devekoped at Aalborg Media College">See and read about the computer animation project here</a></p>
<p> </p>
<p> </p>
<p><a href="portfolio.aspx" title="Go look at Mark Nielsen's projects, including web page design, graphic design, programming and much more...">Close this window</a></p>
</article>
</div>
and the corresponding CSS:
.infobox {
position:fixed;
top:0;
left:0;
/*margin-left:-300px;*/
width:100%;
height:100%;
background: rgba(0, 0, 0,.75);
visibility:hidden;
z-index:9999;
}
.infobox article {
text-align:center;
margin-top:10%;
padding:5%;
padding-bottom:20%;
width:100%;
background-color:#292929;
opacity:0.95;
}
.infobox article p {
text-align:center;
}
.infobox article h1 {
border:none;
margin:2% 0;
padding:0;
font-size:1.8em;
}
.infobox a.important-link {
font-size:1.5em;
/*text-transform:uppercase;
font-style:normal;*/
}
.infobox:hover {
visibility:visible;
}
#aftermath:active + #aftermathinfo {
visibility:visible;
}
You can view the live version here.