3 Image Transition Opacity on Click Issue - html

Question

I'm developing a site and the navigation buttons have 3 states as usual, the initial idle state, a hover state and a click state and a state to show that's the page your on.
I thought I'd add some nice transitions to the :hover and :active states, and while the :hover works nicely I can't seem to get the :active to work as I want.
If you take a look at this fiddle you'll have a clearer idea of what I'm trying to achieve:
http://jsfiddle.net/number8pie/3BvhM/2/
As you can see on :hover there is an opacity transition that I think looks quite nice, but when you click the link I want about_us.png and about_us_hover.png to be set to opacity 0 (using the transition) and about_us_active.png to be left visible.
Here's the HTML:
<ul class="right"> <!-- no closing tag on <li> so that the whitespace between elements is removed-->
<li id="about-us">
<a class="nav-link" href="#">
<div class="icon-cont">
<img class="top" src="http://s28.postimg.org/7u46xdbjd/about_us.png">
<img class="middle" src="http://s28.postimg.org/mel9s76i1/about_us_hover.png">
<img class="bottom" src="http://s28.postimg.org/bt1eg706h/about_us_active.png">
</div>
<span class="nav-text">about us</span>
</a>
<li id="products">
<a class="nav-link" href="#"><span class="nav-text">products</span></a>
<li id="the-team">
<a class="nav-link" href="#"><span class="nav-text">the team</span></a>
<li id="environment">
<a class="nav-link" href="#"><span class="nav-text">environment</span></a>
<li id="contact">
<a class="nav-link" href="#"><span class="nav-text">contact</span></a>
</ul>
And the CSS:
ul li {
height: 56px;
width: 56px;
margin: 0;
font-family: 'RobotoLight';
font-size: 21px;
display: inline-block;
text-transform: uppercase;
}
.icon-cont {
position: relative;
height: 56px;
width: 56px;
margin: 0;
}
.icon-cont img {
position: absolute;
left: 0;
-webkit-transition: opacity 0.4s ease-in-out;
-moz-transition: opacity 0.4s ease-in-out;
-o-transition: opacity 0.4s ease-in-out;
transition: opacity 0.4s ease-in-out;
}
.icon-cont img.top {
z-index: 30;
}
.icon-cont img.middle {
z-index: 20;
}
.icon-cont img.bottom {
z-index: 10;
}
.icon-cont img.top:hover {
opacity: 0;
}
.icon-cont img.top:active {
opacity: 0;
}
.icon-cont img.middle:active {
opacity: 0;
}
.nav-text {
font-size: 0;
position: absolute;
left: -1000px;
}
Thanks in advance for any hep and or suggestions.

Answer 1

You can do most of this using some CSS trickery- namely by relying on the :checked state of a sibling hidden input to control the appearance of a label.
To set the state depending on the current page, you'll likely need to use some JS to identify the page, then apply a suitable class to the element in question.
This will work for on/off click states. If you want a depress (mousedown) state, you should likely use a button element instead of anchor a tags in your code to apply :active to.
Demo Fiddle
(alternate demo using a button and :active)
HTML
<input type='checkbox' id='menuItem' />
<label for='menuItem'>i</label>
CSS
input {
display:none;
}
label {
display:inline-block;
height:50px;
width:50px;
line-height:50px;
color:white;
font-size:1.5em;
font-style:italic;
font-family:arial;
background:lightgreen;
text-align:center;
position:relative;
transition:all 200ms ease-in;
}
label:after {
height:30px;
width:30px;
content:'';
border:4px solid white;
border-radius:100%;
display:inline-block;
position:absolute;
left:6px;
top:6px;
opacity:0;
transition:all 200ms ease-in;
}
label:hover:after {
opacity:1;
}
input:checked+label {
background:none;
color:lightgreen;
}
input:checked+label:after {
border-color:lightgreen;
}

Answer 2

Here it is using javascript. I add a class to the link onmousedown and use that to add the active styles. I've used plain js as I'm not sure if you're using jQuery or some other DOM manipulation library. The code is here:
http://jsfiddle.net/John_C/xsdnL/3/
var navLinks = document.getElementsByClassName('nav-link');
Array.prototype.forEach.call(navLinks, function(link) {
link.addEventListener("mousedown", function(){
this.className += " active";
}, false);
link.addEventListener("mouseup", function(){
this.className = "nav-link";
}, false);
});