помогите сделать так!

Евгений5769

Сообщений: 83

Репутация: 1

Сообщение # 1 | 01:00:30 24 Авг 2014

Есть картинка

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

Сообщение отредактировал Евгений5769 - Воскресенье, 24 Авг 2014, 01:00:51

OneBlow

Сообщений: 31

Репутация: 4

Сообщение # 2 | 03:17:51 24 Авг 2014

Создаём 2 класса img и img2

В первом указываем

Код

.img {position:relative;}

Во втором:

Код

.img2 {position:absolute;top:0px;}

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

Код

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

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

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

Готово.

Сообщение отредактировал OneBlow - Воскресенье, 24 Авг 2014, 03:20:34

Евгений5769

Сообщений: 83

Репутация: 1

Сообщение # 3 | 11:56:57 24 Авг 2014

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 (69.1 Kb)

Сообщение отредактировал Евгений5769 - Воскресенье, 24 Авг 2014, 11:57:28

OneBlow

Сообщений: 31

Репутация: 4

Сообщение # 4 | 13:58:59 24 Авг 2014

Класс img 2 нужно закрыть после <img что бы картинка накладывалась на вторую

Сообщение отредактировал OneBlow - Воскресенье, 24 Авг 2014, 13:59:12

Евгений5769

Сообщений: 83

Репутация: 1

Сообщение # 5 | 14:52:32 24 Авг 2014

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>

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

Страница 1 из 1 1
Модератор форума: dotbot