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

(Ответов: 1, Просмотров: 192)
  1. Дипломник Аватар для IX.
    • Регистрация: 17.11.2012
    • Сообщений: 214
    • Репутация: 6
    Вот с таким кодом происходит смена картинки при наведении.
    А как сделать переход плавным? 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>
    • 0
  2. Дипломник Аватар для IX.
    • Регистрация: 17.11.2012
    • Сообщений: 214
    • Репутация: 6
    Вот, кому надо:

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

Похожие темы

Темы Раздел Ответов Последний пост
Как сделать ссылку от сайта что бы по ней контролировать переход на этот сайт.
Вопросы от новичков 7 06.10.2014 19:09
Как сделать, что бы при нажатии на картинку, был переход и поиск этой картинки в yandex.ru/images ?
Web программирование 8 16.07.2014 22:37
Припарковал домен, как сделать переход страниц?
WordPress 0 01.08.2013 17:43
Как сделать автоматические переход по инпутам?
Web программирование 1 25.10.2011 21:28
Плавный переход картинок Juery
Web программирование 1 03.12.2010 23:03

У кого попросить инвайт?

Вы можете попросить инвайт у любого модератора:

Информеры