Здравствуйте, помогите, пожалуйста,создать правильный скрипт. Нужно чтобы картинка при наведении заменилась другой, т.е. первая исчезает, а вторая в этот момент появляется и увеличивается на том же месте, как на сайте мегафона внизу есть подобных 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
} |