Q:

how to tint image in div when clicked for 0.5 seconds

I'm developing a phonegap app.
I have a set of divs, each of them containing an image element. I've searched and found how to tint them when the get clicked, but the tint stays there (of course).
What I want to know is how to remove automatically that tint after 0.5 seconds.
This is my code now:
......
<div id="seven">
  <img id="7" src="imageSeven.png" />
  <p>7</p>
</div>
......

<script type="text/javascript">
var seven = document.getElementById("seven");
.......
seven.onclick = function () {
  seven.className = seven.className + " overlay";
}
....

And here's my css:
.overlay
{
display: block;
position: absolute;
background-color: rgba(200, 100, 100, 0.5);
top: 0px;
left: 0px;
width: 0px;
height: 0px;
border-radius: 8%;
}

Any ideas on how should I do this?
PS:
I've only copied one of them, the others are exactly the same.

A:

var delay=500;
setTimeout(function(){
    //Code to remove tint
},delay); 

