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

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

Сообщений: 22228 Регистрация: Май 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

Сообщений: 22228 Регистрация: Май 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

Сообщений: 10610 Регистрация: Мар 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)

Новые темы	Объявления	Свободное общение
13:23 LOSPOLLOS.COM - Конвертим по рецепту Хайзенберга. Dating, Mainstream, Binary Options 13:16 Dao.AD: Монетизация и покупка Push/Pops/Inpage и Video трафика! 08:26 Помогите! ОТКРЫЛАСЬ монетизация на ЮТЮБ! Но Как быть в 2024 с Adsense? 08:23 Rotapost прикрыли! Чем пользоваться? 17:53 Webvork - международная товарная СРА сеть с сертифицированными офферами на Европу. 12:39 2Index - быстрая индексация страниц сайта и обратных ссылок 06:17 3snet - гемблинг, беттинг, форекс, бинарные опционы, майнинг	23:01 Скрипт обменника валют 20:45 BestX24 - быстрый и безопасный обменник криптовалют и электронных денежных средств 17:34 CryptoGraph — Анонимный обмен криптовалют без KYC и AML 17:06 TETChange-Обменник криптовалют 14:45 TIGER SMS — Виртуальные номера для SMS-верификации (опт и розница) 14:43 Onechange.me — надежный обменник криптовалют и фиатных средств 14:03 Quix Email - сервис почтовых активаций	03:32 Точные прогнозы на футбол 13:08 Бесплатный майнинг Tether (USDT) 10:29 С юмором по жизни! 16:49 monetizer.agency – рекламная сеть для взрослого и развлекательного трафика. 100$ новому вебмастеру 20:43 Добро пожаловать в цифровой мир... 15:59 Про мясо 23:09 ПП от PMS remote.team - 200$ за команду