OnMouseOver и onmouseout исчезать эффект

Question

Я ищу решение, чтобы добавить FadeIn и эффект затухания для этой строки кода:

<img src="images/1.jpg" onmouseover="this.src='images/2.jpg'"  
onmouseout="this.src='images/1.jpg'" alt="fade_me" /> 

Кто-нибудь есть какие-либо простые решения без этого становится слишком сложным? Благодаря!

Answer 1

Ну, я не знаю о сложности, но это работает очень хорошо.

http://jsfiddle.net/8KFT8/1/

<style> 
    .container { 
     position: relative; 
    } 
    .container img { 
     position: absolute; 
     transition: opacity .5s ease; 
    } 
    .container img:hover { 
     opacity: 0; 
    } 
</style> 

<div class="container"> 
    <img src="images/2.jpg"/> 
    <img src="images/1.jpg"/> 
</div>