I have a disjointed rollover and I would like to add a timed ease-out (only) effect. I made a page with just that particular issue isolated, see here:
http://raphaelzwyer.com/testRapha/overviewtest.html

When hovering over "overview" an over-view image shows up in a defined area and on roll-out the image disappears.
All good but I now would like the image to fade-out after half a second, even if the pointer is still hovering over "overview" (not just only when the pointer is out).
With other words, every time the visitor hovers over "overview" the image appears for half a second and then fades out.

I'm a newbie. CSS only would be great. I tried webkit ease-out/ease-in but couldn't really get it to show and then ease-out only.

The HTML code:

HTML Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>raphaelzwyer</title>
<link href="css/raphaelzwyer.css" type="text/css" media="screen" title="raphaelzwyer stylesheet" rel="stylesheet" charset="utf-8"/>
<script type="text/javascript" src="js/raphaelzwyerFive.js"></script>
</head>

<body>

 <div id="header"> 
                    <ul id="overviewlayer">
                       <li>
                            <a href="portfolio.html">
                                <div id="overviewtext">overview</div>
                                <div class="overview"><img src="images/overview.png" width="660" height="1284" alt="overviewlayer"/></div>
                             </a>
                        </li>
                        <li id="wordmark"></li>
                    </ul>  <!-- end of overviewlayer -->
    </div>  <!-- end of header --> 

</body>
</html>
The relevant CSS code:

Code:
#header {
        position: relative;
        top: 36px;
        left: 212px;
        width: 660px;
        height: 48px;}
#overviewlayer a .overview  {
        display:none;}
#overviewlayer a:hover .overview  {
        display: block;
        position: absolute;
        top: 116px;
        left: 0px;
        height: 852px;
        width: 660px;
        padding: 0px;
        margin: 0px;
        color: #000;
        font-size: 11px;
        background-color: #FFF;
        z-index: +20;}
.overview {
        position: relative;
        top: 12px;
        left: 0px;
        height: 852px;
        width: 660px;
        z-index: +10;}
#overviewtext {
        position: absolute;
        top: 0px;
        width: 100px;
        height: 48px;
        padding-top: 4px;
        border-top-style: solid;
        border-top-width: 1px;
        z-index: +600;}
a {
        text-decoration: none;
        color: #a9a9a9;}
a:hover, a:focus {
        text-decoration: none;
        color: #be1f2d;}
li {
        list-style-type: none;
        display: inline;}