• Страница 1 из 1
  • 1
Модератор форума: Yuri_G  
Сообщество uCoz » Мастерская uCoz » Дизайн: управление шаблонами » Помогите с css, смена картинок при наведении
Помогите с css, смена картинок при наведении
DOREMI0918
Сообщений: 10
Репутация: 0

Сообщение # 1 | 20:06:42
Милости прошу, что я уже только не делал)

Вообщем есть скрипт, который якобы вызывает изображение с youtube

<img src="http://i1.ytimg.com/vi/<?if(strpos($OTHER1$, 'youtu.be')!='-1')?><?if(strpos($OTHER1$, 'www.youtu')='-1')?><?substr($OTHER1$,16,11)?><?else?><?substr($OTHER1$,20,11)?><?endif?><?else?><?if(strpos($OTHER1$, 'www.youtube')='-1')?><?substr($OTHER1$,27,11)?><?else?><?substr($OTHER1$,31,11)?><?endif?><?endif?>/0.jpg" class="in-video" />

Это изображение которое он мне выдает



CSS изображения



а я хочу сделать чтобы при наведении на изображение в течении 2 сек перекрывалось картинкой.

Что-то типо этого


Прикрепления: 1433290.jpg (35.6 Kb) · 7980534.jpg (42.7 Kb)
Сообщение отредактировал DOREMI0918 - Четверг, 19 Сен 2013, 20:10:54
Ljubasha
Сообщений: 834
Репутация: 157

Сообщение # 2 | 23:02:41
DOREMI0918, Без адреса сайта могу посоветовать только псевдокласс :hover
DOREMI0918
Сообщений: 10
Репутация: 0

Сообщение # 3 | 07:55:27
Ljubasha, дело в том, что css не понимает таких ссылок.

http://i1.ytimg.com/vi/<?if(strpos($OTHER1$, 'youtu.be')!='-1')?><?if(strpos($OTHER1$, 'www.youtu')='-1')?><?substr($OTHER1$,16,11)?><?else?><?substr($OTHER1$,20,11)?><?endif?><?else?><?if(strpos($OTHER1$, 'www.youtube')='-1')?><?substr($OTHER1$,27,11)?><?else?><?substr($OTHER1$,31,11)?><?endif?><?endif?>/0.jpg

hover я бы давно уже сделал если этаки бы работало.

у меня скрипт стоит в информере, допустим вот я написал css стиль вместе с hover

.in-video {position: relative; margin: 10px; width: 199px; background: #f8f8f8; padding: 2px; border: 1px solid #BDBDBD !important;}
.in-video:hover {background: #f8f8f8;}

но тут бэкграунд будет всегда снизу, по этому прошу помощи помочь мне
Miss_Esq
Сообщений: 13859
Репутация: 4159
Уровень замечаний:

Сообщение # 4 | 10:18:04
DOREMI0918, z-index примените

DOREMI0918
Сообщений: 10
Репутация: 0

Сообщение # 5 | 11:13:50
Miss_Esq, посмотри пожалуйста как это вывести, z-index не помогает http://add-music.ucoz.ru/

Добавлено (20 Сен 2013, 11:13:50)
---------------------------------------------
Miss_Esq, блок называется, Популярные видео/клипы [ADD MUSIC] прямо на главной странице внизу картинки)

Miss_Esq
Сообщений: 13859
Репутация: 4159
Уровень замечаний:

Сообщение # 6 | 11:30:05
DOREMI0918,

.screen00:hover > .screen01 {z-index: 1;}
.screen00:hover > .screen02 {z-index: 2;}


<div class="screen00" style="position: relative; left: 0px; top: 0px;">
<div class="screen01" style="position: absolute; left: 0px; top: 0px; z-index: 2;">
Ваш скрипт, УО
</div>
<div class="screen02" style="position: absolute; left: 0px; top: 0px; z-index: 1;">
Картинка при наведении
</div>
</div>

DOREMI0918
Сообщений: 10
Репутация: 0

Сообщение # 7 | 11:42:03
Miss_Esq,

Не работает, все черное и нет размеров)

<div class="screen00" style="position: relative; left: 0px; top: 0px;">
<div class="screen01" style="position: absolute; left: 0px; top: 0px; z-index: 2;">
<img src="http://i1.ytimg.com/vi/<?if(strpos($OTHER1$, 'youtu.be')!='-1')?><?if(strpos($OTHER1$, 'www.youtu')='-1')?><?substr($OTHER1$,16,11)?><?else?><?substr($OTHER1$,20,11)?><?endif?><?else?><?if(strpos($OTHER1$, 'www.youtube')='-1')?><?substr($OTHER1$,27,11)?><?else?><?substr($OTHER1$,31,11)?><?endif?><?endif?>/0.jpg" />
</div>
<div class="screen02" style="position: absolute; left: 0px; top: 0px; z-index: 1;">
Картинка при наведении
</div>
</div>
Miss_Esq
Сообщений: 13859
Репутация: 4159
Уровень замечаний:

Сообщение # 8 | 11:48:23
DOREMI0918, Что то в упор не вижу где на сайте есть хоть одно видео ..

DOREMI0918
Сообщений: 10
Репутация: 0

Сообщение # 9 | 12:12:49
Miss_Esq,

Дак мне надо чтобы картинки перекрывались, вот не работает.
Сделал как ты сказал.

http://add-music.ru/

Добавлено (20 Сен 2013, 12:05:52)
---------------------------------------------
Miss_Esq,

т.е чтобы картинка накладывалась на другую картинку и все)

Добавлено (20 Сен 2013, 12:12:49)
---------------------------------------------
Если кто может помочь, то вот

Код

<a href="$ENTRY_URL$" title="Клип $TITLE$ скачать бесплатно">
<img src="http://i1.ytimg.com/vi/<?if(strpos($OTHER1$, 'youtu.be')!='-1')?><?if(strpos($OTHER1$, 'www.youtu')='-1')?><?substr($OTHER1$,16,11)?><?else?><?substr($OTHER1$,20,11)?><?endif?><?else?><?if(strpos($OTHER1$, 'www.youtube')='-1')?><?substr($OTHER1$,27,11)?><?else?><?substr($OTHER1$,31,11)?><?endif?><?endif?>/0.jpg" class="in-video" />

</a>

CSS

.in-video {position: relative; margin: 10px; width: 199px; background: #f8f8f8; padding: 2px; border: 1px solid #BDBDBD !important;}
.in-video:hover {background: #fff;}

Shеriff
Сообщений: 3187
Репутация: 2662

Сообщение # 10 | 13:19:40
DOREMI0918,
Код
.in-video {transition: opacity 0.5s cubic-bezier(0, 0, 0.58, 1) 0s;}
.in-video:hover {opacity: 0.7;}
.in-video:after{content:"";position:absolute;top:50%;left:50%;padding-top:0;width:0;background-color:#383c3d;background:rgba(56,60,61,0.8) url(http://fi4a.ru/img/newdesign/zoom.png) no-repeat 50% 50%;-webkit-border-radius:31px;-moz-border-radius:31px;border-radius:31px;}
.in-video:hover:after{padding-top:62px;width:62px;margin:-31px 0 0 -31px;}

Картинку другую подберите.

Профессиональный сервис опросов WebAsk
DOREMI0918
Сообщений: 10
Репутация: 0

Сообщение # 11 | 15:44:34
Цитата (Shеriff)
.in-video {transition: opacity 0.5s cubic-bezier(0, 0, 0.58, 1) 0s;} .in-video:hover {opacity: 0.7;}
.in-video:after{content:"";position:absolute;top:50%;left:50%;padding-top:0;width:0;background-color:#383c3d;background:rgba(56,60,61,0.8) url(http://fi4a.ru/img/newdesign/zoom.png) no-repeat 50% 50%;-webkit-border-radius:31px;-moz-border-radius:31px;border-radius:31px;}
.in-video:hover:after{padding-top:62px;width:62px;margin:-31px 0 0 -31px;}

Картинку другую подберите.

Спасибо, opacity работает, но картинка никак нет(
Shеriff
Сообщений: 3187
Репутация: 2662

Сообщение # 12 | 15:51:38
DOREMI0918, конечно сейчас стили будут немного другими, поскольку вы отредактировали код.

Профессиональный сервис опросов WebAsk
DOREMI0918
Сообщений: 10
Репутация: 0

Сообщение # 13 | 15:53:37
Shеriff,

background:rgba(56,60,61,0.8) url(http://fi4a.ru/img/newdesign/zoom.png) no-repeat 50% 50%;
вот как бы эта картинка отображалась? если он даже не видит её. Она наврено под бэграундом(
Selena
Сообщений: 15657
Репутация: 1100

Сообщение # 14 | 16:32:03
С флэш сложно что-то сделать. И если вы даже добьётесь такого эффекта у себя, не факт, что это увидят пользователи. У меня вообще плагин установить просит.

Отправляя сообщение о помощи, приводите ссылку на свой сайт. Это не считается рекламой, зато снимает массу вопросов.
DOREMI0918
Сообщений: 10
Репутация: 0

Сообщение # 15 | 17:12:44
Selena,

Вот смотрите, есть допустим стили такие.


Код
.screen {float:right;width:100px;height:100px;position:relative;cursor:pointer;margin-right:8px;}.screen .bg_over {position:absolute;bottom:0;right:0;color:#fff;width:100px;height:100px;background:#000;opacity:0;filter: alpha(opacity=0);-webkit-transition:all .2s ease-out;
-moz-transition:all .2s ease-out;-ms-transition:all .2s ease-out;}
.screen .bg_play {background:url('/icons/image.png');width:48px;height:48px;margin:25px 0 0 25px;}
.screen:hover .bg_over {opacity:0.8;filter: alpha(opacity=80);}

Они работают, просто нужно правильно написать код к ним.
Было бы хорошо)
Сообщество uCoz » Мастерская uCoz » Дизайн: управление шаблонами » Помогите с css, смена картинок при наведении
  • Страница 1 из 1
  • 1
Поиск: