• Страница 1 из 1
  • 1
Наложение картинки на картинку при наведении через Ксс
oRIGINALДата: Пятница, 14.03.2014, 09:10 | Сообщение # 1
Статус: Offline
Рядовой
Сообщений: 13
Награды «0»
-
+
«0»
Поможешь за 50 р.?
у меня есть код ксс

Код
.img_news {
float:left;
display:inline-block;
margin:0 14px 5px 0;
padding:5px;
background: #EDF1F2;
border:1px solid #DDE1E2;
overflow: hidden;
}
.img_news img {
width:220px;
border:1px solid #DDE1E2;
}


для картинок новостей сайта нужно чтобы при наведении на картинки отображалась еще одна.
«Пред. тема | След. тема»
ReactorДата: Пятница, 14.03.2014, 12:04 | Сообщение # 2
Статус: Offline
Лейтенант
Сообщений: 48
Награды «0»
-
+
«1»
Ну во-первых, не ксс, а цсс.
Во-вторых, держи, сделал. Единственное там с размерами хз, у тебя высота картинок новостей разная, ну думаю дальше сам сможешь уладить.

в CSS


Код
.img_news a {
position: absolute;
display: block;
width: 222px;
height: 38%;
background: #000;
opacity: 0;
-moz-opacity: 0;
filter: alpha(opacity=0);
-webkit-transition: opacity .2s ease-in-out;
-moz-transition: opacity .2s ease-in-out;
-ms-transition: opacity .2s ease-in-out;
-o-transition: opacity .2s ease-in-out;
transition: opacity .2s ease-in-out;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
-khtml-border-radius: 5px;
border-radius: 5px;
z-index: 110;
}

.img_news a:hover {
opacity: .7;  
-moz-opacity: .7;  
filter: alpha(opacity=70);
}

.img_news a span {
display: block;
width: 100%;
height: 100%;
cursor: pointer;
background: url('ТУТ ССЫЛКА НА ТВОЮ КАРТИНКУ') center center no-repeat;
}


в вид новостей


Код
<a href="$ENTRY_URL$">
  <span></span>
  </a>


Ставишь перед картинкой в новостях, тобишь должно быть так.


Код
<div class="img_news">  
  <a href="$ENTRY_URL$">
  <span></span>
  </a>
  <img src="http://lotr-games.org/_nw/0/63039434.jpg" alt="Edain: Изенгард vs. Мордор"/>
  </div>  
  <p class="message">
бла бла бла и т.д и т.п.
А на счет оплаты не нужно, хотя есть пару услуг которые ты мог бы мне оказать. Давай в скайпе свяжемся.
Мой скайп: xanter39
ProsvetekvatorДата: Пятница, 14.03.2014, 12:22 | Сообщение # 3
Статус: Offline
Полковник
Сообщений: 152
Награды «2»
-
+
«7»
Я тоже пишу ксс, хоть и не правильно)) привык уже.
ReactorДата: Пятница, 14.03.2014, 18:27 | Сообщение # 4
Статус: Offline
Лейтенант
Сообщений: 48
Награды «0»
-
+
«1»
Prosvetekvator, а почему бы не писать CSS, за вместо русских букв?
ProsvetekvatorДата: Пятница, 14.03.2014, 18:32 | Сообщение # 5
Статус: Offline
Полковник
Сообщений: 152
Награды «2»
-
+
«7»
Цитата Reactor ()
Prosvetekvator, а почему бы не писать CSS, за вместо русских букв?

Да фиг знает fear


Проблемы по установке скриптов пишите на форум: тыц
Пообщаться здесь
ProsvetekvatorДата: Пятница, 14.03.2014, 18:47 | Сообщение # 6
Статус: Offline
Полковник
Сообщений: 152
Награды «2»
-
+
«7»
oRIGINAL, вот посмотри подобный вариант http://in.ucoz.org/news/watermark_dlja_jukoz_na_css/2013-02-03-92
только если нужно только при наведении, то придется прописать :hover в цсс к классам


Проблемы по установке скриптов пишите на форум: тыц
Пообщаться здесь
ReactorДата: Пятница, 14.03.2014, 21:08 | Сообщение # 7
Статус: Offline
Лейтенант
Сообщений: 48
Награды «0»
-
+
«1»
Цитата Prosvetekvator ()
oRIGINAL, вот посмотри подобный вариант http://in.ucoz.org/news/watermark_dlja_jukoz_na_css/2013-02-03-92 только если нужно только при наведении, то придется прописать :hover в цсс к классам
Зачем?
Я уже все сделал)) Взял с его сайта вид новостей и одну новость, 10-15 минут экспериментов и вуаля, готово, вставляй и пользуйся)
ProsvetekvatorДата: Пятница, 14.03.2014, 21:23 | Сообщение # 8
Статус: Offline
Полковник
Сообщений: 152
Награды «2»
-
+
«7»
Reactor, ну в обще образовательных целях smile

Проблемы по установке скриптов пишите на форум: тыц
Пообщаться здесь
oRIGINALДата: Пятница, 14.03.2014, 21:42 | Сообщение # 9
Статус: Offline
Рядовой
Сообщений: 13
Награды «0»
-
+
«0»
не работает. Не появляется картинка.
ReactorДата: Пятница, 14.03.2014, 21:45 | Сообщение # 10
Статус: Offline
Лейтенант
Сообщений: 48
Награды «0»
-
+
«1»
oRIGINAL, все работает и проверено.
ProsvetekvatorДата: Пятница, 14.03.2014, 21:50 | Сообщение # 11
Статус: Offline
Полковник
Сообщений: 152
Награды «2»
-
+
«7»
oRIGINAL, может ни так что-то делаешь, попробуй мой вариант поставить.

Проблемы по установке скриптов пишите на форум: тыц
Пообщаться здесь
ReactorДата: Пятница, 14.03.2014, 23:01 | Сообщение # 12
Статус: Offline
Лейтенант
Сообщений: 48
Награды «0»
-
+
«1»
Prosvetekvator, не правильно установил, все сделал. Тема закрыта.
  • Страница 1 из 1
  • 1
Поиск:
Понравилась тема? Расскажи друзьям...