[IX.]

Вот с таким кодом происходит смена картинки при наведении.
А как сделать переход плавным? transition? Пробовал, не получается.


<style type="text/css">
.img20 {
display:block;
width:320px;
height:103px;
background:url("http://www.картинка1");
}
.img20:hover {
background:url("http://www.картинка2");
}
</style>
<a class="img20" href="http://someHref.html"></a>

[IX.]

Вот, кому надо:

<style type="text/css">
.img20 {
display:block;
width:320px;
height:103px;
position: relative;
}
.img20:before, .img20:after{
content: "";
display: block;
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
transition: opacity 2s ease;
}
.img20:before{
background:url("http://www.картинка1");
opacity: 1;
}
.img20:after{
background:url("http://www.картинка2");
opacity: 0;
}
.img20:hover:before {
opacity: 0;
}
.img20:hover:after {
opacity: 1;
}
</style>
<a class="img20" href="http://someHref.html"></a>