Страница 1 из 11
Модератор форума: dotbot 
Сообщество uCoz » Архивариус » Корзина » помогите сделать так!
помогите сделать так!
Евгений5769
Сообщений: 83
Репутация: 1

Сообщение # 1 | 01:00:30
Есть картинка

Как средствами CSS/JS добиться такого эффекта, не редактируя само изображение?

Сообщение отредактировал Евгений5769 - Воскресенье, 24 Авг 2014, 01:00:51
OneBlow
Сообщений: 26
Репутация: 4

Сообщение # 2 | 03:17:51
Создаём 2 класса img и img2

В первом указываем
Код
.img {position:relative;}


Во втором:
Код
.img2 {position:absolute;top:0px;}


Выглядит это так:

Код
<div class="img">
<img src="http://bingbangstudios.com/press/fork/fork_pixie_400x400.jpg"> <!-- Основная картинка -- >
<div class="img2"><img src="http://i053.radikal.ru/1408/b5/8c029bb76c30.png"></div>  <!-- Картинка эффект -- >
</div>

1-я картинка:


2-я картинка (эффект):


На выходе получаем:



Готово.
Сообщение отредактировал OneBlow - Воскресенье, 24 Авг 2014, 03:20:34
Евгений5769
Сообщений: 83
Репутация: 1

Сообщение # 3 | 11:56:57
OneBlow, ну смотри что вот как у меня
Код
<div class="widget"> <a href="$ENTRY_URL$"> <div class="img"> <img src="$IMG_URL1$" alt="$TITLE$" style="center top no-repeat;"> </div>
<div class="img2"><img src="http://a1ex.ru/img/gradient.png">
<ul> <li><span class="e-rating">$RATED$</span>   
<span class="e-comments">$COMMENTS_NUM$</span></li> </ul> </div><b>$TITLE$</b> </a> </div>

вроде все правильно сделал но получилось так
Прикрепления: 9087388.png(69Kb)

Сообщение отредактировал Евгений5769 - Воскресенье, 24 Авг 2014, 11:57:28
OneBlow
Сообщений: 26
Репутация: 4

Сообщение # 4 | 13:58:59
Класс img 2 нужно закрыть после <img что бы картинка накладывалась на вторую
Сообщение отредактировал OneBlow - Воскресенье, 24 Авг 2014, 13:59:12
Евгений5769
Сообщений: 83
Репутация: 1

Сообщение # 5 | 14:52:32
OneBlow,
Код
<div class="widget"> <a href="$ENTRY_URL$"> <div class="img"> <img src="$IMG_URL1$" alt="$TITLE$" style="center top no-repeat;">
<div class="img2"><img src="http://a1ex.ru/img/gradient.png"> </div>
<ul> <li><span class="e-rating">$RATED$</span>  
<span class="e-comments">$COMMENTS_NUM$</span></li> </ul> </div><b>$TITLE$</b> </a> </div>

Вот так?
только все ровно ничего

Сообщество uCoz » Архивариус » Корзина » помогите сделать так!
Страница 1 из 11
Поиск: