При наведении показать иконку

@sending · Регистрация: 03.11.2012

Студворк — интернет-сервис помощи студентам

В общем задача довольно тривиальна и частенько можно встретить на разных сайтах. Суть такова:
Есть на сайте, допустим новости. Открываем новость - тут есть текст новости и превью картинки к новости. Наводим курсор на картинку, на ней появляется по центру (по середине) иконка лупы и так далее.

Так вот, как реализовать такой ховер? Абсолютным позиционированием я сделал, но задача усложнилась после того, как картинки стали разных размеров. То есть width - всегда один и тот же размер (310px), а вот height - динамичен (уменьшается пропорционально, поэтому всегда разное).

@Ruisenor · 13.07.2013, 19:11

а можно выложить код ?

@sending · 13.07.2013, 19:27 **[ТС]**

HTML5
1
2
3
4
5
6
<div class="photo">
    <a id="fancy" href="http://mysite/news-big/image.jpg">
        <span></span>
        <img src="http://mysite/news-medium/image.jpg">
    </a>
</div>

И CSS:

CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
.photo  {
    float: left;
    position: relative;
    width: 300px;
    margin-right: 10px;
    padding: 7px;
    background: #eeeeee;
    overflow: hidden;
}
 
.photo  a   span    {
    display: none;
}
 
.photo  a:hover span    {
    display: block;
    position: absolute;
    top: 83px;
    left: 133px;
    width: 53px;
    height: 53px;
    background: url('../images/icon-zoom-in.png') no-repeat;
}

Вот

@Ruisenor · 13.07.2013, 20:00

CSS
1
text-align:center;

попробуйте для дива фото

@sending · 13.07.2013, 20:08 **[ТС]**

Тут дело не в этом блоке (.photo). Если отключить position: absolute; в <span>, то иконка лупы появляется за пределами изображения. Только путем position: absolute; можно поместить ее поверх превьюшки. Вот вопрос в том, как при ховере повесить иконку по центру картинки (по горизонтали и вертикали).

@Rodion2703 · 13.07.2013, 20:10

CSS
1
margin: auto auto;

?

@sending · 13.07.2013, 20:18 **[ТС]**

Для абсоютнопозицианируемого блока "auto" не работает. Только если точное значение задавать. Поэтому нет, это "margin: auto auto;" тоже не сработало.

@Ruisenor · 13.07.2013, 20:22

может лучше поставить релатив - если я правильно понял вы это для ховер прописали ?
попробуйте релатив и "margin: auto auto;"

@sending · 13.07.2013, 20:26 **[ТС]**

Я уже писал выше, если использовать для :hover - relative, то иконка показывается внизу картинки, вместо того, чтобы появиться в ее центре.

@Rodion2703 · 13.07.2013, 20:31

Попробуйте вместо span использовать div

@sending · 13.07.2013, 20:40 **[ТС]**

У <span> стоит display: block - значит, он ведет себя так же как и div. Я повторюсь, тут дело не в смене тегов, а в том, как при position: absolute; спозиционировать строго по центру иконку, при условии, что width постоянный, а height динамичный. Возможно стоит ввести еще один класс, я не знаю, но смена span на div ничего не даст.

@Ruisenor · 13.07.2013, 21:31

CSS
1
2
3
4
5
6
7
8
.image {
position:absolute;
margin:auto;
top:0;
bottom:0;
left:0;
right:0;
}

попробуй такое решение вот здесь пишут что работает

@sending · 13.07.2013, 21:37 **[ТС]**

То что нужно. Спасибо больше!

@preacher7 · 08.04.2016, 00:26

а не проще сделать так:

CSS
1
2
3
img {
cursor : url('../icon-zoom-in.png'), default;
}

курсор меняется при наведении на картинку, вот так: http://samoxodom.ru/

@imbasel · 08.04.2016, 06:37

я бы еще через hover каких ни будь эффектиков накидал

@rubenne · 09.04.2016, 15:36

а на какой cms лучше всего интернет - магазин сделать?

@imballevi · 09.04.2016, 15:37

я бы рекомендовал Вам UMI-CMS

Новые блоги и статьи Все статьи Все блоги /
Установка Android SDK, NDK, JDK, CMake и т.д. 8Observer8 25.01.2026 Содержание блога Перейдите по ссылке: https:/ / developer. android. com/ studio и в самом низу страницы кликните по архиву "commandlinetools-win-xxxxxx_latest. zip" Извлеките архив и вы увидите. . .	Вывод текста со шрифтом TTF на Android с помощью библиотеки SDL3_ttf 8Observer8 25.01.2026 Содержание блога Если у вас не установлены Android SDK, NDK, JDK, и т. д. то сделайте это по следующей инструкции: Установка Android SDK, NDK, JDK, CMake и т. д. Сборка примера Скачайте. . .	Использование SDL3-callbacks вместо функции main() на Android, Desktop и WebAssembly 8Observer8 24.01.2026 Содержание блога Если вы откроете примеры для начинающих на официальном репозитории SDL3 в папке: examples, то вы увидите, что все примеры используют следующие четыре обязательные функции, а. . .	моя боль iceja 24.01.2026 Выложила интерполяцию кубическими сплайнами www. iceja. net REST сервисы временно не работают, только через Web. Написала за 56 рабочих часов этот сайт с нуля. При помощи perplexity. ai PRO , при. . .
Модель сукцессии микоризы anaschu 24.01.2026 Решили писать научную статью с неким РОманом	http://iceja.net/ математические сервисы iceja 20.01.2026 Обновила свой сайт http:/ / iceja. net/ , приделала Fast Fourier Transform экстраполяцию сигналов. Однако предсказывает далеко не каждый сигнал (см ограничения http:/ / iceja. net/ fourier/ docs ). Также. . .	http://iceja.net/ сервер решения полиномов iceja 18.01.2026 Выкатила http:/ / iceja. net/ сервер решения полиномов (находит действительные корни полиномов методом Штурма). На сайте документация по API, но скажу прямо VPS слабенький и 200 000 полиномов. . .	Расчёт переходных процессов в цепи постоянного тока igorrr37 16.01.2026 / * Дана цепь(не выше 3-го порядка) постоянного тока с элементами R, L, C, k(ключ), U, E, J. Программа находит переходные токи и напряжения на элементах схемы классическим методом(1 и 2 з-ны. . .

@sending 64 / 22 / 9 Регистрация: 03.11.2012 Сообщений: 327

	При наведении показать иконку 13.07.2013, 17:11. Показов 14076. Ответов 16 Метки нет (Все метки) В общем задача довольно тривиальна и частенько можно встретить на разных сайтах. Суть такова: Есть на сайте, допустим новости. Открываем новость - тут есть текст новости и превью картинки к новости. Наводим курсор на картинку, на ней появляется по центру (по середине) иконка лупы и так далее. Так вот, как реализовать такой ховер? Абсолютным позиционированием я сделал, но задача усложнилась после того, как картинки стали разных размеров. То есть width - всегда один и тот же размер (310px), а вот height - динамичен (уменьшается пропорционально, поэтому всегда разное). 0

@Ruisenor 130 / 130 / 1 Регистрация: 29.05.2013 Сообщений: 612
	13.07.2013, 19:11
	а можно выложить код ? 0

@sending 64 / 22 / 9 Регистрация: 03.11.2012 Сообщений: 327
	13.07.2013, 20:08 [ТС]
	Тут дело не в этом блоке (.photo). Если отключить position: absolute; в <span>, то иконка лупы появляется за пределами изображения. Только путем position: absolute; можно поместить ее поверх превьюшки. Вот вопрос в том, как при ховере повесить иконку по центру картинки (по горизонтали и вертикали). 0

@sending 64 / 22 / 9 Регистрация: 03.11.2012 Сообщений: 327
	13.07.2013, 20:18 [ТС]
	Для абсоютнопозицианируемого блока "auto" не работает. Только если точное значение задавать. Поэтому нет, это "margin: auto auto;" тоже не сработало. 0

@Ruisenor 130 / 130 / 1 Регистрация: 29.05.2013 Сообщений: 612
	13.07.2013, 20:22
	может лучше поставить релатив - если я правильно понял вы это для ховер прописали ? попробуйте релатив и "margin: auto auto;" 0

@sending 64 / 22 / 9 Регистрация: 03.11.2012 Сообщений: 327
	13.07.2013, 20:26 [ТС]
	Я уже писал выше, если использовать для :hover - relative, то иконка показывается внизу картинки, вместо того, чтобы появиться в ее центре. 0

@Rodion2703 24 / 20 / 5 Регистрация: 06.01.2013 Сообщений: 819
	13.07.2013, 20:31
	Попробуйте вместо span использовать div 0

@sending 64 / 22 / 9 Регистрация: 03.11.2012 Сообщений: 327
	13.07.2013, 20:40 [ТС]
	У <span> стоит display: block - значит, он ведет себя так же как и div. Я повторюсь, тут дело не в смене тегов, а в том, как при position: absolute; спозиционировать строго по центру иконку, при условии, что width постоянный, а height динамичный. Возможно стоит ввести еще один класс, я не знаю, но смена span на div ничего не даст. 0

@sending 64 / 22 / 9 Регистрация: 03.11.2012 Сообщений: 327
	13.07.2013, 21:37 [ТС]
	То что нужно. Спасибо больше! 0

@imbasel 0 / 0 / 0 Регистрация: 08.04.2016 Сообщений: 1
	08.04.2016, 06:37
	я бы еще через hover каких ни будь эффектиков накидал 0

@rubenne 0 / 0 / 0 Регистрация: 09.04.2016 Сообщений: 1
	09.04.2016, 15:36
	а на какой cms лучше всего интернет - магазин сделать? 0

@imballevi 0 / 0 / 0 Регистрация: 09.03.2016 Сообщений: 3
	09.04.2016, 15:37
	я бы рекомендовал Вам UMI-CMS 0