Чат сообщества
|
   |
| Модератор форума: Yuri_G |
| Сообщество uCoz Мастерская uCoz Дизайн: управление шаблонами Помогите с css, смена картинок при наведении |
| Помогите с css, смена картинок при наведении |
|
Милости прошу, что я уже только не делал)
Вообщем есть скрипт, который якобы вызывает изображение с 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, дело в том, что 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, посмотри пожалуйста как это вывести, z-index не помогает http://add-music.ucoz.ru/
Добавлено (20 Сен 2013, 11:13:50) |
|
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> |
|
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,
Дак мне надо чтобы картинки перекрывались, вот не работает. Сделал как ты сказал. http://add-music.ru/ Добавлено (20 Сен 2013, 12:05:52) Добавлено (20 Сен 2013, 12:12:49) |
|
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
|
|
Цитата (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,
background:rgba(56,60,61,0.8) url(http://fi4a.ru/img/newdesign/zoom.png) no-repeat 50% 50%; вот как бы эта картинка отображалась? если он даже не видит её. Она наврено под бэграундом( |
|
С флэш сложно что-то сделать. И если вы даже добьётесь такого эффекта у себя, не факт, что это увидят пользователи. У меня вообще плагин установить просит.
Отправляя сообщение о помощи, приводите ссылку на свой сайт. Это не считается рекламой, зато снимает массу вопросов.
|
|
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);} Они работают, просто нужно правильно написать код к ним. Было бы хорошо) |
| |||
| |||