Как сделать плавный переход (см. код)?

<style type="text/css">

@keyframes yourname {

from {background:url("https://cdn.pixabay.com/photo/2014/03/23/23/35/small-flower-293688__340.jpg");}

to {background:url("https://cdn.pixabay.com/photo/2013/10/30/02/59/small-flower-202724__340.jpg");}

}

.img20 {

display:block;

width:320px;

height:103px;

background:url("https://cdn.pixabay.com/photo/2014/03/23/23/35/small-flower-293688__340.jpg");

animation-name: yourname;

animation-duration: 2s;

}

.img20:hover {

background:url("https://cdn.pixabay.com/photo/2013/10/30/02/59/small-flower-202724__340.jpg");

}

</style>

<a class="img20" href="http://someHref.html"></a>

Nervjaga, работает ваш код, но анимации перехода нет. Смена происходит резко.

Браузер Firefox, последняя версия.

Так будет моргать при первом наведении, т.к. картинка не загружена. Надо тогда предзагрузку делать, скрытым тегом.

Либо можно сделать так:

<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>

Браво, какраз в эту сторону код переделывал, вы меня опередили! :)

sbseo, ура! Спасибо!