• Страница 1 из 1
  • 1
Форум » Web-Раздел » Начинающему вебмастеру » Как увеличить изображения на сайте через CSS (Как сделать плавное увеличение картинки при наведении)
Как увеличить изображения на сайте через CSS
Kosten
Вторник, 25 Апреля 2017 | Сообщение 1
Оффлайн
Администраторы
Сообщений:44267
Награды: 70
Приветствую всех, хочу спросить и вообще разобраться, по теме как увеличить изображение по клику. Пользователь -SAM- поделился информацией, за что спасибо и вот одна ссылка шла на видео, что ниже вам предоставлю.

Там же шли стили, что тоже ниже идут. На тестовом сайте как не прописывал их, но не эффекта и не увеличение не было, идет только стандартное.

Вот думаю, может кто в курсе и прояснит.



Стили:

Код
img[tabindex="0"] {
cursor: zoom-in;
}
img[tabindex="0"]:focus {
position: fixed;
z-index: 10;
top: 0;
left: 0;
bottom: 0;
right: 0;
width: auto;
height: auto;
max-width: 93%;
max-height: 93%;
margin: auto;
box-shadow: 0 0 20px #000, 0 0 0 1000px rgba(59,59,59,.4);
}
img[tabindex="0"]:focus,
img[tabindex="0"]:focus ~ * {
pointer-events: none;
}


Видео урок:

Прикрепления: 3582972.png (21.1 Kb)
Страна: (RU)
Kosten
Вторник, 25 Апреля 2017 | Сообщение 2
Оффлайн
Администраторы
Сообщений:44267
Награды: 70
Разобрался, нужно ставить не операторы, а ссылку такую.

Код
<img src="http://pluton.clan.su/_fr/0/7719615.jpg" alt="семья медведей" tabindex="0" width="150">


Где ширина выставлена на 150 и по клику изображение примет свои реальные размеры.

Только не по центру выводит, что уже в стандартных стилях нужно или убирать или править.
Страна: (RU)
waak
Вторник, 25 Апреля 2017 | Сообщение 3
Оффлайн
Заблокированные
Сообщений:588
Награды: 14
а тот код что ты на моём сайте взял разве не такой же ?
Страна: (RU)
-SAM-
Вторник, 25 Апреля 2017 | Сообщение 4
Оффлайн
Друзья сайта
Сообщений:880
Награды: 40
waak, зачем писать про тот код, а также что вы имеете вообще какое-то отношение к этому?

Kosten, там нужно переменную на вывод изображения ставить в src, а стили на увеличение применяются исходя из прописанного атрибута tabindex.




Помог? Скажи спасибо в виде "+" - вам мелочь, а мне приятно.
Бесплатное оказание помощи в ответах на "Вопросы про uCoz".


Сообщение отредактировал
-SAM- - Вторник, 25 Апреля 2017, 20:59
Страна: (UA)
Kosten
Вторник, 25 Апреля 2017 | Сообщение 5
Оффлайн
Администраторы
Сообщений:44267
Награды: 70
Цитата waak ()
а тот код что ты на моём сайте взял разве не такой же ?

waak, давай не преувеличивать, просто по видео перейди и все поймешь. Просто сам не ожидал, что на ютуб также стили выкладывают, и здесь твой сайт не причем, и как понял, этот стиль написал пользователь, который на видео, но если только не ты комментируешь, если ты, значит с твоего сайта.
Страна: (RU)
-SAM-
Вторник, 25 Апреля 2017 | Сообщение 6
Оффлайн
Друзья сайта
Сообщений:880
Награды: 40




Помог? Скажи спасибо в виде "+" - вам мелочь, а мне приятно.
Бесплатное оказание помощи в ответах на "Вопросы про uCoz".


Сообщение отредактировал
-SAM- - Вторник, 25 Апреля 2017, 22:25
Страна: (UA)
Kosten
Вторник, 25 Апреля 2017 | Сообщение 7
Оффлайн
Администраторы
Сообщений:44267
Награды: 70
-SAM-, у каждого стиля и кода свой автор есть, здесь без обсуждение. Но если брал какой то материал у waak, то здесь был уверен, что он им написан. Так как waak основном свой материал заливает, но как понял, это который продается у него на сайте, это точно его, который бесплатно, возможно переделан и доработан.
Страна: (RU)
Kosten
Среда, 26 Апреля 2017 | Сообщение 8
Оффлайн
Администраторы
Сообщений:44267
Награды: 70
Еще одна тема по увеличению изображение по клику.

Код
<img src="ссылка на картинку" tabindex="0" />


CSS:

Код
img {
  width: 200px;
  height: 200px;
}

img:focus {
  width: auto;
  height: auto;
  pointer-events: none;
}
Страна: (RU)
-SAM-
Среда, 26 Апреля 2017 | Сообщение 9
Оффлайн
Друзья сайта
Сообщений:880
Награды: 40
Кстати, по-моему можно туда прописать еще эффектов на transition \ transform, чтобы плавно было (чисто для красоты, ясное дело - кому нужно будет, сделают... можно и просто по наводке делать, без клика - если :focus на :hover заменить).

Собственно, вот еще нарыл по этой же теме материалы:
/load/plavnoe_uvelichenie_kartinki_pri_navedenii_na_css3/81-1-0-6579
/load/uvelichenie_izobrazhenie_v_2_klika_na_css3/81-1-0-7238




Помог? Скажи спасибо в виде "+" - вам мелочь, а мне приятно.
Бесплатное оказание помощи в ответах на "Вопросы про uCoz".


Сообщение отредактировал
-SAM- - Среда, 26 Апреля 2017, 08:45
Страна: (UA)
Форум » Web-Раздел » Начинающему вебмастеру » Как увеличить изображения на сайте через CSS (Как сделать плавное увеличение картинки при наведении)
  • Страница 1 из 1
  • 1
Поиск: