powered by simpleCommunicator - 2.0.61     © 2026 Programmizd 02
Целевая тема:
Создать новую тему:
Автор:
Закрыть
Цитировать
Форумы / HTML, JavaScript, VBScript, CSS [игнор отключен] [закрыт для гостей] / Как сделать оверлей на IMG определенного типа?
10 сообщений из 10, страница 1 из 1
Как сделать оверлей на IMG определенного типа?
    #39119550
Alibek B
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Участник
Допустим у меня есть такая HTML-страница:
Код: html
1.
2.
3.
4.
<img src="img1.jpg" data-full="img1_full.jpg"/>
<img src="img2.jpg" data-full="img2_full.jpg"/>
<img src="img3.jpg"/>
<img src="img4.jpg" data-full="img4_full.jpg"/>


Я хочу на рисунки, у которых задан тэг data-full, наложить сверху значок лупы.

Планировал это сделать примерно так:
Код: css
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
img {display:block;}
img[data-full] {
position: relative;
border: 2px solid red;
padding: 8px;
}
img[data-full]:after {
content: "";
position: absolute;
width: 40px;
height: 40px;
left: 100%;
background: url("zoom.png") no-repeat right bottom;
}



Но почему-то не работает (хотя довольно похожий способ задания полупрозрачного фона для DIV с помощью псевдоэлемента :after работает).
Я что-то делаю не так? Или у IMG нет псевдоэлементов?

________________________
Мы смотрим с оптимизмом...
...в оптический прицел.
...
Рейтинг: 0 / 0
Как сделать оверлей на IMG определенного типа?
    #39119651
вадя
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Участник
авторНо почему-то не работает
у тебя значок лупы по экрану бегает? а должен прыгать:?
...
Рейтинг: 0 / 0
Как сделать оверлей на IMG определенного типа?
    #39119694
Alibek B
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Участник
Значка лупы нет вообще.
Если в стиль :after добавить рамку (border), то рамка тоже не отрисовывается.
...
Рейтинг: 0 / 0
Как сделать оверлей на IMG определенного типа?
    #39119834
вадя
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Участник
Alibek B.,
а сделать img 100% прозрачным?
...
Рейтинг: 0 / 0
Как сделать оверлей на IMG определенного типа?
    #39119840
Alibek B
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Участник
Зачем?
...
Рейтинг: 0 / 0
Как сделать оверлей на IMG определенного типа?
    #39120021
вадя
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Участник
Alibek B.Зачем?
у тебя твой значок может лежать под картинкой
...
Рейтинг: 0 / 0
Как сделать оверлей на IMG определенного типа?
    #39120022
вадя
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Участник
Alibek B.,
чисто для проверки
одна строчка и проверено....
...
Рейтинг: 0 / 0
Как сделать оверлей на IMG определенного типа?
    #39120033
Alibek B
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Участник
Нет, это я проверял.
Я задавал border, рамки не появлялось.
И на всякий случай сейчас сделал рисунок прозрачным, под ним ничего нет.
В интернете нашел несколько подобных проблем. Похоже что большинство браузеров просто не поддерживают псевдоэлементы для IMG.
...
Рейтинг: 0 / 0
Как сделать оверлей на IMG определенного типа?
    #39120056
Фотография Relic Hunter
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Участник
Alibek B.у IMG нет псевдоэлементов?
Код: javascript
1.
2.
3.
4.
5.
$(function() {

    $('.target').after('<img src="..." />');

});
...
Рейтинг: 0 / 0
Как сделать оверлей на IMG определенного типа?
    #39120116
Alibek B
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Участник
С JS понятно. Я думал чистым CSS обойтись.
...
Рейтинг: 0 / 0
10 сообщений из 10, страница 1 из 1
Форумы / HTML, JavaScript, VBScript, CSS [игнор отключен] [закрыт для гостей] / Как сделать оверлей на IMG определенного типа?
Найденые пользователи ...
Разблокировать пользователей ...
Читали форум (0):
Пользователи онлайн (0):
x
x
Закрыть


Просмотр
0 / 0
Close
Debug Console [Select Text]