Бесплатный форум: форум поддержки
Добро пожаловать на форум поддержки сервиса Forum2x2 !

Для полноценной работы с форумом,
пожалуйста, войдите на форум под своим логином (если вы уже зарегистрированы) или же зарегистрируйтесь.


С нашей помощью вы можете создать форум,
похожий на этот!
Мы в социальных сетях

Правила форума

для обязательного прочтения!


Внимание! Важная информация для РЕГИСТРАЦИИ на форуме:

Пожалуйста, не регистрируйтесь на этом форуме с электронными адресами mail.ru, bk.ru, inbox.ru, list.ru - вам может не прийти письмо со ссылкой активации!
Вы можете воспользоваться адресами типа yandex.ru, rambler.ru, gmail.com и т.д.
Последние темы
» Хочу разместить баннер
автор Angel1 Вчера в 17:33

» AdSense
автор Magliga Вчера в 17:28

» Мои личные настройки
автор Jelena Вчера в 16:10

» Перестала работать регистрация на форум.
автор Jelena Вчера в 15:59

» [Общая тема] Заявки на удаление сомнительной рекламы
автор АГРАФЕНА Вчера в 14:02

» Единственный выбор
автор Cari Вчера в 13:49

» Исчезли картинки
автор Armanda Вс 17 Июн - 20:22

» Перенос форума
автор RedCat Вс 17 Июн - 18:46

» Не работают подписи
автор Dana Domirani Вс 17 Июн - 17:59

» Самоудаление вложенного файла
автор Dana Domirani Вс 17 Июн - 17:59

Интересные решения
Быстрый переход к сервисам: j-p-g.net Видео фоторедактор Транслит

Плавная смена картинок при наведении курсора

Перейти вниз

Плавная смена картинок при наведении курсора

Сообщение автор Домовой в Вт 26 Июн - 20:53

Плавная смена картинок при наведении курсора через CSS

В CSS ставим

Код:
.image.first,.image.second {
border:2px solid transparent;
margin:0;
padding:0;
}

.image.first {
opacity:1px;
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;
}

.image.first:hover {
opacity:0.00;
}
 
div.ImgField {
display:inline-block;
background-position:center center;
background-repeat:no-repeat;
margin:0;
padding:0;
}
А это туда где желаете видеть картинки

<div class=ImgField>
<img class="image first" src="ссылка на картинку 1"/>
<img class="image second" src="ссылка на картинку 2"/>
</div>
<div class=ImgField>
<img class="image first" src="ссылка на картинку 1"/>
<img class="image second" src="ссылка на картинку 2"/>
</div>
где видимая картинка
картинка открывающаяся при наведении курсора

Блок
Код:
<div  class=ImgField>
<img class="image first" src="http://ссылка на картинку 1"/>
<img class="image second" src="http://ссылка на картинку 2"/>
</div>
размножайте сколько вам угодно.

ДЕМО
avatar
Домовой
 

Мужчина

Сообщения : 6812
Возраст : 94
Регистрация : 2010-01-30
Благодарности : 3237

Без предупреждений

Вернуться к началу Перейти вниз

Вернуться к началу

- Похожие темы

 
Права доступа к этому форуму:
Вы не можете отвечать на сообщения