help with fade on mouse over

How do i make my sites welcome page be faded before you mouse over it but then once you do it becomes more visable? it is a tumblr page so i think it has to be开发者_如何学Python html.

any help on this? thanks

http://realhighlife.tk/

since the picture in question is also a clickable link is it possible to do this?

<center><a href="http://therealhighlife.tumblr.com/"><img src="http://i52.tinypic.com/29p40eo.jpg"></a></center>

@ilia-choly is right, but if you want it to work in some older browsers also, you could try jQuery, specifically:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.js"></script>
<script>
/* Config */    
    targetElement = 'center a'; /* Select the element(s) you want to fade in and out */
    fadedOpacity = .3; /* The opacity value you like for your faded state */
    animDuration = 250; /* The duration in ms for the fade animations, smaller is faster */

/* This block runs once the document loads to bind the plugin behaviour to your target */
$(function(){
    $(targetElement).fadeInOnHover(fadedOpacity, animDuration);
    // ... You can bind the behaviour to other elements here if you need to, e.g:
    // $('div.new-target').fadeInOnHover(fadedOpacity, animDuration);
});

/* This small jQuery plugin behaviour can be applied to any element */
$.fn.fadeInOnHover = function(fadedOpacity, animDuration) {
    $(targetElement)
        .fadeTo(0, fadedOpacity)
        .bind('mouseover',function(){
            $(this).fadeTo(animDuration, 1);
        })
        .bind('mouseout',function(){
            $(this).fadeTo(animDuration, fadedOpacity);
        })
    ;
};
</script>

look into css3 transitions. http://www.cardeo.ca/2010/creating-a-fading-link-transition-with-css3

keep in mind these will only work in modern browsers.

html

<img id="test" src="http://static.adzerk.net/Advertisers/2333.jpg" />

css

#test {  
    opacity: 0.5;
    -webkit-transition-property: opacity, 
    background;  -webkit-transition-duration: 1s, 1s;  -webkit-transition-timing-function: linear, ease-in; }  

#test:hover {  
    opacity: 1.0;
}

fiddle: http://jsfiddle.net/SW5CV/