Сепия при наведении на картинку но! Как вставить текст при наведении?

Сергей777555 · 16.01.2015

Сайт на Ucoz но нужна помощь в вёрстке (запутался)

Привет всем ! При наведении на шапку сайта (картинку) появляется сепия, через hover. На картинке поверх закреплено два блока Div(поиск и регистрация) Помогите сделать что-бы при наведении на картинку появлялась сепия и текст.

Это верхняя часть сайта HTML

<div class="image2">
<div class="image"><div class="sepia"><img src="/av2015.jpg" alt="" width="1075" height="283" style="font-size: 8pt;"></div>
<h2><span style="color: rgb(255, 255, 255);">
<div style="text-align: center;"><span style="font-size: 10pt; font-family: Arial;">$LOGIN_FORM$ </span>
<?if($USERS_ON$)?><?if($USER_LOGGED_IN$)?> <a href="$PERSONAL_PAGE_LINK$"><b>$USERNAME$</b></a> <?else?> <b>$USERNAME$</b><?else?> | <a href="$REGISTER_LINK$" title="Регистрация">Регистрация</a><?endif?><?endif?> <?if($USERS_ON$)?><?if($USER_LOGGED_IN$)?> | <a href="$LOGOUT_LINK$" title="Выход">Выход</a><?else?> | <a href="$LOGIN_LINK$" title="Вход">Вход</a><?endif?><?endif?>
</div></span><br /></a></h2>
<h3>$MYINF_36$</h3>
</div>
</div></a></div>это css сепии

.sepia img {
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-o-transition: all 1s ease;
-ms-transition: all 1s ease;
transition: all 1s ease;
}

.sepia img:hover {
-webkit-filter: sepia(100%);
}Это css блоков поиска и регистрации

Код:

.image {
position : relative;
width : 100%; /* for IE 6 */
}

.image2 {
position : relative;
width : 100%; /* for IE 6 */
}

h2 {
position : absolute;
top : -10px;
left : 855;
width : 20%;
font-size: 12px;
opacity: 0.7;
background: #E7EEF8; background: linear-gradient(to top, #E7EEF8, #C2E0FF); /* Цвет фона */
padding: 0px;
border: 1px solid #fff;
border-radius: 0 0 10px 10px;;
}

h3 {
position : absolute;
top : -14px;
left : 2;
width : 30%;

}

BaNru · 16.01.2015

1) Вам известно, что данная сепия будет работать только в Хроме? Другие браузеры, которых много, это не поддерживаю.
2) Выложите код на http://jsfiddle.net/, а переменные шаблона замените временно реальными элементами, если они относятся к вопросу. Так вам ответ могут быстрее дать. Уважайте время и нервы отвечающих, помогающих вам.

Сергей777555 · 16.01.2015

BaNru сказал(а):
1) Вам известно, что данная сепия будет работать только в Хроме? Другие браузеры, которых много, это не поддерживаю.
2) Выложите код на http://jsfiddle.net/, а переменные шаблона замените временно реальными элементами, если они относятся к вопросу. Так вам ответ могут быстрее дать. Уважайте время и нервы отвечающих, помогающих вам.

Работает во всех современных браузерах

.sepia img:hover {
-webkit-filter: sepia(100%);
}

Это и есть сепия, как добавить надпись на картинку, только при наведении? Спасибо за совет))) У меня получается добавлять текст но его видно всегда.

Помогите сделать: Обычная картинка на неё наводишь мышку появляется сепия и надпись, убираешь мышку пропадает сепия и надпись.

Сепию при наведении уже сделал нужно появление текста, всё вместе)

BaNru сказал(а):
1) Вам известно, что данная сепия будет работать только в Хроме? Другие браузеры, которых много, это не поддерживаю.
2) Выложите код на http://jsfiddle.net/, а переменные шаблона замените временно реальными элементами, если они относятся к вопросу. Так вам ответ могут быстрее дать. Уважайте время и нервы отвечающих, помогающих вам.

Ни разу не пользовался вот ссылка http://jsfiddle.net/oubjk9d7/ Спасибо)

BaNru · 16.01.2015

Сергей777555 сказал(а):
Работает во всех современных браузерах

То есть Firefox и IE это несовременные браузеры?

Вы явно указываете -webkit-filter, угадайте что это значит.
Даю подсказку - это браузеры которые работают на движке webkit (и ответлениях, типа blink), а вот Firefox, который уже начал поддержку фильтров - проигнорирован.
http://caniuse.com/#feat=css-filters

http://jsfiddle.net/oubjk9d7/1/

Сергей777555 · 16.01.2015

BaNru сказал(а):
Работает во всех современных браузерах

Нажмите, чтобы раскрыть...

То есть Firefox и IE это несовременные браузеры?

Вы явно указываете -webkit-filter, угадайте что это значит.
Даю подсказку - это браузеры которые работают на движке webkit (и ответлениях, типа blink), а вот Firefox, который уже начал поддержку фильтров - проигнорирован.
http://caniuse.com/#feat=css-filters

http://jsfiddle.net/oubjk9d7/1/

Я особо в этом не разбираюсь, учусь, css и HTML знаю на 30% может и меньше, подскажите пожалуйста как вставить текст при наведении вместе с градиентом?

Сергей777555 сказал(а):
Работает во всех современных браузерах

Нажмите, чтобы раскрыть...

То есть Firefox и IE это несовременные браузеры?

Вы явно указываете -webkit-filter, угадайте что это значит.
Даю подсказку - это браузеры которые работают на движке webkit (и ответлениях, типа blink), а вот Firefox, который уже начал поддержку фильтров - проигнорирован.
http://caniuse.com/#feat=css-filters

http://jsfiddle.net/oubjk9d7/1/

Я особо в этом не разбираюсь, учусь, css и HTML знаю на 30% может и меньше, подскажите пожалуйста как вставить текст при наведении вместе с градиентом?

Ой не заметил спасибо)))

BaNru сказал(а):
Работает во всех современных браузерах

Нажмите, чтобы раскрыть...

То есть Firefox и IE это несовременные браузеры?

Вы явно указываете -webkit-filter, угадайте что это значит.
Даю подсказку - это браузеры которые работают на движке webkit (и ответлениях, типа blink), а вот Firefox, который уже начал поддержку фильтров - проигнорирован.
http://caniuse.com/#feat=css-filters

http://jsfiddle.net/oubjk9d7/1/

А что куда подставили для улучшения знаний?

BaNru · 16.01.2015

Сравните код и найдите отличия.
Затем рекомендую по каждой строчки кода обратиться к документации на http://htmlbook.ru/

Сергей777555 · 16.01.2015

BaNru сказал(а):
Сравните код и найдите отличия.
Затем рекомендую по каждой строчки кода обратиться к документации на http://htmlbook.ru/

.sepia img, .sepia span было .sepia img

.sepia span{
opacity:0;
position: absolute;
width:100%;
top: 50%;
background-color:white;
}
.sepia:hover span{
opacity:1;
}
__________________________--------

.sepia span:hover {
position : relative;
width : 100%; /* for IE 6 */
}

h7 span:hover {
color : white;
font : bold 24px/45px Helvetica, Sans-Serif;
letter-spacing : -1px;
background : rgb(0, 0, 0); /* на случай, если следующая строка не сработает */
background : rgba(0, 0, 0, 0.7);
padding : 10px;
}

BaNru сказал(а):
Сравните код и найдите отличия.
Затем рекомендую по каждой строчки кода обратиться к документации на http://htmlbook.ru/

У меня на сайте не работает

Сергей777555 сказал(а):
Сравните код и найдите отличия.
Затем рекомендую по каждой строчки кода обратиться к документации на http://htmlbook.ru/

Нажмите, чтобы раскрыть...

.sepia img, .sepia span было .sepia img

.sepia span{
opacity:0;
position: absolute;
width:100%;
top: 50%;
background-color:white;
}
.sepia:hover span{
opacity:1;
}
__________________________--------

.sepia span:hover {
position : relative;
width : 100%; /* for IE 6 */
}

h7 span:hover {
color : white;
font : bold 24px/45px Helvetica, Sans-Serif;
letter-spacing : -1px;
background : rgb(0, 0, 0); /* на случай, если следующая строка не сработает */
background : rgba(0, 0, 0, 0.7);
padding : 10px;
}

BaNru сказал(а):

Сравните код и найдите отличия.
Затем рекомендую по каждой строчки кода обратиться к документации на http://htmlbook.ru/

Нажмите, чтобы раскрыть...

У меня на сайте не работает

BaNru · 16.01.2015

h7

:blink: :blink: :blink:

Не работает потому что стоит чуть выше сравнить код

.sepia:hover img
И посмотреть внимательнее как я сделал вместо

h7 span:hover
1) H7 НЕ СУЩЕСТВУЕТ!
2) HOVER я назначал не span'у
3) Надпись съехала, надо добавить

left:0
В .sepia span

Сергей777555 · 16.01.2015

BaNru сказал(а):
h7

Нажмите, чтобы раскрыть...

:blink: :blink: :blink:

Не работает потому что стоит чуть выше сравнить код

.sepia:hover img
И посмотреть внимательнее как я сделал вместо

h7 span:hover
1) H7 НЕ СУЩЕСТВУЕТ!
2) HOVER я назначал не span'у
3) Надпись съехала, надо добавить

left:0
В .sepia span

Поставил всё как у вас но не работает

.sepia img, .sepia span {
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-o-transition: all 1s ease;
-ms-transition: all 1s ease;
transition: all 1s ease;
}

.sepia img:hover {
-webkit-filter: sepia(100%);
}

.sepia span{
opacity:0;
position: absolute;
width:100%;
top: 50%;
background-color:white;
}
.sepia:hover span{
opacity:1;
}

Код:

<div class="image2">
 <div class="image"><div class="sepia"><img src="/av2015.jpg" alt="" width="1075" height="283" style="font-size: 8pt;"><span>9 мая</span></div>
<h2><span style="color: rgb(255, 255, 255);">
<div style="text-align: center;"><span style="font-size: 10pt; font-family: Arial;">$LOGIN_FORM$ </span>
<?if($USERS_ON$)?><?if($USER_LOGGED_IN$)?><!--<s5200>--><!--</s>--> <a href="$PERSONAL_PAGE_LINK$"><b>$USERNAME$</b></a> <!--<s3167>--><?else?><!--<s5212>--><!--</s>--> <b>$USERNAME$</b><?else?> | <a href="$REGISTER_LINK$" title="Регистрация"><!--<s3089>-->Регистрация<!--</s>--></a><?endif?><?endif?> <?if($USERS_ON$)?><?if($USER_LOGGED_IN$)?> | <a href="$LOGOUT_LINK$" title="Выход"><!--<s5164>-->Выход<!--</s>--></a><?else?> | <a href="$LOGIN_LINK$" title="Вход"><!--<s3087>-->Вход<!--</s>--></a><?endif?><?endif?>
 </div></span><br /></a></h2>
<h3>$MYINF_36$</h3> 
</div>
</div></a></div>

А как прижать к правой части?

BaNru · 16.01.2015

Код:

.sepia span{
  opacity:0;
  position: absolute;
  width:100%;
  top: 50%;
  background-color:white;
}

Всё настраивается тут для блока с текстом
http://htmlbook.ru/samlayout/blochnaya-verstka/pozitsionirovanie-elementov

Сергей777555 · 17.01.2015

СПАСИБО САЙТУ, ВСЁ ПОЛУЧИЛОСЬ!!!

ЗАХОДИТЕ СЮДА, ПОМОГУТ !!!

BaNru · 17.01.2015

Не надо так кричать.
Для "спасибо" есть кнопочки слева от сообщений.

Сепия при наведении на картинку но! Как вставить текст при наведении?

Сергей777555

New Member

BaNru

Пацифизжу

Сергей777555

New Member

BaNru

Пацифизжу

Сергей777555

New Member

BaNru

Пацифизжу

Сергей777555

New Member

BaNru

Пацифизжу

Сергей777555

New Member

BaNru

Пацифизжу

Сергей777555

New Member

BaNru

Пацифизжу

Онлайн статистика

Статистика форума

Новые пользователи

Поделиться этой страницей