Наложение изображений, как реализовать?

Наложение изображений, как реализовать?, должно же быть простое решение...

Сообщений: 22892 Регистрация: Май 2011

29 Мая 2013 20:18

Есть на сайте много фото. Все они одного размера, один класс и являются ссылками на раскрытие во весь размер. Как бы так сделать, чтобы на каждом из этих изображений появился значек (лупа, например)?

Мы не можем похвастаться мудростью глаз
И умелыми жестами рук,
Нам не нужно все это, чтобы друг друга понять.
Сигареты в руках, чай на столе - так замыкается круг,
И вдруг нам становится страшно что-то менять.

Anonymous

Сообщений: 1383 Регистрация: Июн 2011

29 Мая 2013 20:30

--->((x)) Archer, Как вариант, http://ruseller.com/lessons/les1684/demo/index.html или http://ruseller.com/lessons/les611/demo/index.html или http://ruseller.com/lessons/les1359/demo/index.html

Изменено: Anonymous - 29 Мая 2013 20:33

--->((x)) Archer

Сообщений: 22892 Регистрация: Май 2011

29 Мая 2013 20:37

Наверно, неверно выразился. С изображением и эффектом увеличения все нормально. Нужно, чтобы поверх изображения просто дополнительно автоматом в одном и том же месте у изображения выводилось небольшой изображение лупы (чтоб понятно было, что может быть увеличино). Подозреваю, что это можно сделать картинкой лупы небольшой и парой строчек в CSS. Но как именно - не знаю.

Anonymous

Сообщений: 1383 Регистрация: Июн 2011

29 Мая 2013 21:05

Есть такое решение. Вместо затемнения можно поставить изображение. http://www.html.by/threads/6086-Zatemnenie-izobrazhenija-pri-navedenii

Sato Master

Сообщений: 404 Регистрация: Мар 2013

29 Мая 2013 21:44

--->((x)) Archer, это лучше в js назначить, чем в css
Киньте урл в личку, постараюсь помочь

Рома

Сообщений: 353 Регистрация: Июл 2011

30 Мая 2013 13:35

--->((x)) Archer, собственно там и нет ничего сложного:) Весь смысл кода в том, что для вашей лупы нужно задать display:none, потом же нужно с помощью псевдо-класса :hover задать чтобы при наведении на изображение появилась лупа: img:hover lupa {display:block;}, где img класс вашего изображения, lupa - класс изображения с лупой. Ну а все остальное по вашему вкусу. Скорее всего нужно задать абсолютное позиционирование и z-index. Если мне не изменяет память то все smile:mail:

Код

#navpagetop{
                position: relative;
                width:226px;
                height:339px;
}

#navpagetop:hover IMG{
                vertival-align:top;
}

#navpagetop A{
                position:absolute;
                display:none;
                left:0;
                top:0;
                right:0;
                bottom:0;
                background: url(images/service/page/foto1_hover.png) no-repeat 50% 50%;
}

#navpagetop:hover A{
                display:block
}



В html -

<body>
                <div id="navpagetop">
                                <mg src="путь-до-исходной-картинки" />
                                <a href="#"></a>
                </div>
</body>

Поисковая оптимизация сайтов. Продвижение. Отзывы: https://www.cy-pr.com/forum/f71/t105377/m1126297?result=edit#message1126297

Feanorr

Сообщений: 565 Регистрация: Янв 2013

30 Мая 2013 14:09

Рома, postion:absolute - "лупы" не слетят в сторону при изменении разрешения? тогда и сами контейнеры картинок надо будет позиционировать абсолютно, а это сделает страницу с фикс размерами.На практике не проверял, так что могу ошибаться. smile:o

Рома

Сообщений: 353 Регистрация: Июл 2011

30 Мая 2013 17:12

Если у вас изображения не статичиские, тогда задавайте позиционирование в процентном соотношении:) Думаю можно без абсолютного позиционирования, просто маржинами загнать в нужное место. Тут сразу отпадает проблема в позиционирование по горизонтали(margin:0 auto), остается по вертикали. Поищите в интернете как выровнять изображение по центру экрана, я дословно не помню что и как. Помню что сначала задается маржин топ на 100% а потом нужно на 50% поднять лупу в верх, чтобы ее центр был в центре екрана. Как-то так, если что не внятно объяснил прошу прощения, чем смог помог smile:mocking:

Coder

Сообщений: 10797 Регистрация: Мар 2013

30 Мая 2013 23:53

Цитата
--->((x)) Archer пишет: чтобы на каждом из этих изображений появился значек (лупа, например)

Посмотрите:

ruseller.com/lessons.php?rub=2&id=261

✓ Проверенные скрипты и полезности для сайта

✓ Курсы

✓ Сервис временных ссылок

Sato Master Сообщений: 404 Регистрация: Мар 2013	#10 31 Мая 2013 00:03 Sato Master, зачем только при наведении и display: none;, если все это можно задать для любого состояния картинки, а для hover задать отдельные стили Изменено: Sato Master - 31 Мая 2013 00:03

Похожие темы:

20.06.2022 10:00	«Сбер» открыл доступ к модели генерации изображений по текстовому описанию на русском языке
30.05.2018 22:07	Я с вами делаюсь секретиком - загрузка изображений после загрузки DOM
27.11.2017 22:10	ALT и TITLE изображений WORDPRESS
26.11.2017 13:16	Проблема с alt и title изображений WordPress
13.08.2017 10:24	Плагин для Wordpress для изображений

Читают тему (гостей: 1, пользователей: 0, из них скрытых: 0)

Новые темы	Объявления	Свободное общение
09:39 Эпоха СДЛ прошла. Как мы выживаем в 2026 году? 09:37 Google начал жёстко давить за манипуляции + апдейт Яндекса 16 апреля - у кого что изменилось 20:36 ИКС Яндекс АПдейт 1 апреля 2026. Обновлён алгоритм расчёта 17:30 стратегии свежести контента в 2026 что реально работает?? 17:29 Апдейт 14 апреля: ощущение, что режет не только выдача 17:28 Штрафы РСЯ за скорость - выкинет ли Яндекс сайт на дешевом хостинге? 17:25 Взломы и уязвимости в 2026 - реально ли новичку защитить свой блог?	13:44 Вериф аккаунты АВИТО + платежи 13:15 Мониторинг обменников Сrypto-scout.io 09:17 Monitex: Мониторинг с кэшбэком 80% в USDT 04:37 От $0.015 за IP \| $0.68 за ГБ \| 9PROXY.COM \| 20+ млн резидентных прокси \| 99,95% аптайм \| Без чёрных списков 03:57 Продажа аккаунтов HH.RU 00:55 SOCKS5 приватные прокси на 30 дней для PayPal 00:54 Google Voice аккаунты для бесплатных SMS и звонков	12:54 Всех с праздником! 09:44 С юмором по жизни! 09:41 Осталось 3-5 месяцев до блокировки YouTube в России, — заявил Клименко 22:41 Ставки на супер тренды в спорте 12:47 Добро пожаловать в цифровой мир... 06:27 Точные прогнозы на футбол 06:07 Список обновленных тем пуст...