Question

I use onmouseover for hover effects of the main site logo on my dev site http://www.new.ianroyal.co.

onmouseover changes the site logo image instantaneously, I was wondering if I could apply a transition effect (fade in, or just generally slow down the transition speed) without using jQuery.

Here is my code:

<a href="<?php echo esc_url( home_url( '/' ) ); ?>" ONMOUSEOVER='ian.src="http://new.ianroyal.co/wp-content/themes/twentytwelve/images/IN-Logo.png" ' ONMOUSEOUT='ian.src="http://new.ianroyal.co/wp-content/themes/twentytwelve/images/IN-Logo1.png"'>
  <img src="http://new.ianroyal.co/wp-content/themes/twentytwelve/images/IN-Logo1.png" NAME="ian" class="header-image" alt="Ian Nelson" />
</a>

I’ve searched and searched but it seems the only solultions are with jQuery which I don’t have a good enough grasp of yet.

Thank you

Answer 1

Use css3 transitions.

div {
    height: 100px;
    width: 100px;
    background: url(image1.png) no-repeat;
    -webkit-transition: all .3s ease-in-out;
    -moz-transition: all .3s ease-in-out;
}

div:hover {
    background-image: url(image2.png)
}

Old browsers will simply not animate the transition.

Demo: http://jsfiddle.net/elclanrs/jg7G3/
​