Показать сообщение отдельно
  #1 (permalink)  
Старый 14.06.2013, 17:29
Аспирант
Отправить личное сообщение для Aleksanderj Посмотреть профиль Найти все сообщения от Aleksanderj
 
Регистрация: 14.06.2013
Сообщений: 70

Изображение при наведении мыши заменяется другой и увеличивается
Здравствуйте, помогите, пожалуйста,создать правильный скрипт. Нужно чтобы картинка при наведении заменилась другой, т.е. первая исчезает, а вторая в этот момент появляется и увеличивается на том же месте, как на сайте мегафона внизу есть подобных 3 изображения. Я смог только css от туда взять, а как дальше быть не знаю. Может есть какой-нибудь плагин jquery, javascript или с css надо поработать или что то еще? Вот что я от туда взял:
Код:
.shadow-box { 
    position: relative; 
    float: left; 
    margin: 10px 
} 
.dt-news .shadow-box { 
    margin: 15px 25px 10px 5px 
} 
.dt-actions .shadow-box { 
    margin: 15px 25px 10px 5px 
} 
.shadow-box * { 
    outline: 0 
} 
.shadow-box .sh-in { 
    display: block; 
    position: relative; 
    z-index: 10; 
    top: -4px; 
    left: -4px; 
    margin: 0 -8px -8px 0 
} 
.shadow-box .l { 
    width: 10px; 
    position: absolute; 
    top: 0; 
    height: 100%; 
    z-index: 20 
} 
.shadow-box .r { 
    width: 10px; 
    position: absolute; 
    top: 0; 
    height: 100%; 
    z-index: 20 
} 
.shadow-box .l { 
    background: url('') 0 0 repeat-y transparent; 
    left: -10px 
} 
.shadow-box .r { 
    background: url('') 100% 0 repeat-y transparent; 
    right: -10px 
} 
.shadow-box .sh-t { 
    position: absolute; 
    height: 10px; 
    z-index: 20; 
    line-height: 0; 
    font-size: 0 
} 
.shadow-box .sh-tr { 
    position: absolute; 
    height: 10px; 
    z-index: 20; 
    line-height: 0; 
    font-size: 0 
} 
.shadow-box .sh-b { 
    position: absolute; 
    height: 10px; 
    z-index: 20; 
    line-height: 0; 
    font-size: 0 
} 
.shadow-box .sh-br { 
    position: absolute; 
    height: 10px; 
    z-index: 20; 
    line-height: 0; 
    font-size: 0 
} 
.shadow-box .sh-t { 
    width: 100%; 
    top: -10px; 
    left: -10px; 
    background: url('') 0 0 no-repeat transparent 
} 
.shadow-box .sh-tr { 
    width: 20px; 
    top: -10px; 
    right: -10px; 
    background: url('') 100% 0 no-repeat transparent 
} 
.shadow-box .sh-b { 
    width: 100%; 
    top: 100%; 
    left: -10px; 
    background: url('') 0 0 no-repeat transparent 
} 
.shadow-box .sh-br { 
    width: 20px; 
    top: 100%; 
    right: -10px; 
    background: url('') 100% 0 no-repeat transparent 
}
Ответить с цитированием