Плавная cмена картинок при наведении курсора на CSS. Работает во всех современных браузерах, поддерживающих CSS3, в старых браузерах смена будет мгновенная.
Блок с изображениями:
image-up - изображение показываемое изначально.
image-down - изображение на которое будет меняться первое.
В тему стиля добавляем:
Блок с изображениями:
Код: Выделить всё
<div class="image-block">
<img class="image-up" src="первое изображение" />
<img class="image-down" src="второе изображение" />
</div>
image-down - изображение на которое будет меняться первое.
В тему стиля добавляем:
Код: Выделить всё
.image-block {
display: inline-block;
padding: 0;
margin: 0;
background-position: center center;
background-repeat: no-repeat;
}
.image-up, .image-down {
border: 0;
margin: 0;
padding: 0;
}
.image-up {
opacity: 1.0;
filter: alpha(opacity=99); /* IE */
display: block;
position: absolute;
z-index: 100;
transition-duration: 0.96s;
-webkit-transition-duration: 0.96s;
-moz-transition-duration: 0.96s;
-o-transition-duration: 0.96s;
-ms-transition-duration: 0.96s; /* IE9+ */
}
.image-up:hover {
opacity: 0.00;
filter: alpha(opacity=00); /* IE */
}
Комментариев нет
Комментариев пока нет, но ты можешь быть первым! Нужно лишь войти или зарегистрироваться и поделиться своим мнением.