Как увеличить изображение в css

Как увеличить изображение в css

Использовать ссылку.

Ограничить высоту картинки с помощью :hover.

Увеличить фото благодаря фокусу :focus.

Увеличить фотографию с помощью позиционирования.

Использование CSS3: увеличение фотографии при клике.

Расширить изображение с помощью свойства transform.

Использовать :after.

Как увеличить изображение с помощью скрипта JavaScript.

37 комментариев:

anya При расширении большого количества изображений с помощью HTML5 они сами выстраиваются в каскад.Скажите как сделать так,чтобы они выстраивались в прямые линии??
спасибо! NMitra После картинки напишите

anya Получилось,но вертикально,а как сделать их в ряд по горизонтали? NMitra Уберите действие из комментария 2 и пробелы между кодом картинок.

. . . anya большое спасибо! Tatiana Chernetsova Спасибо большое! Я многому у вас учусь:) NMitra Я очень рада это слышать))) Владимир В "Использование CSS3: увеличение фотографии при клике", куда вставлять код?
Извините за наивный вопрос, но я новичок в блоггере. NMitra При написании статьи на вкладке "HTML" см. http://4.bp.blogspot.com/-D4dwjS4d6WU/T1tkoVRlBwI/AAAAAAAACxU/Uy9OvLq1Kzc/s1600/oshibka-nezakrytyi-teg.png Анонимный Примеры не проверены во всех браузерах(Ие в частности).Не понятно как разместить например 5 одинаковых вариантов на одной странице — они просто глючат, по одиночке работают (миниатюра1 — миниатюра2 — побарабану. ) )))Конструктивная критика. NMitra Где есть id, нужно делать его индивидуальным. Не все свойства поддерживаются IE, но это не надолго. Для transition и transform нужны префиксы. Я рассматривала эти свойства в отдельных статьях. Анонимный здравствуйте. спасибо вам. много чего интересного я у вас узнал. у меня только есть вопрос. вот в CSS3 можно сделать так чтобы при увеличении страница не опускалась а оставалась в таком же положении в каком она и была. а то когда нажимаю я на нее страница и картинка спускаются вниз и как то не удобно. я новичок в этом. поэтому сам не могу разобраться. заранее спасибо! NMitra Отрегулируйте значения сами

Читайте также:  Как показать скрытые файлы на флешке

См. подробнее http://shpargalkablog.ru/2011/04/css-nalozhenie.html Анонимный отрегулировать картинку по центру я смог, но не смог никак сделать чтобы при открытии картинки, страница не не сползала вниз. я наверное как то не правильно объясняю то что хочу сделать. Анонимный хочу исправить ошибку. "страница не сползала вниз" NMitra При использовании :target не получиться. 🙁 NMitra Исправила статью, замечания учтены. Дмитрий Спасибо, очень интересно. Хочу использовать transform. Подскажите, как сделать чтобы предыдущая картинка не подныривала под следующую. Спасибо. NMitra figure.vkl2:focus <
z-index: 100;
position: relative;
> Дмитрий Спасибо огромное. виталий нестёркин Здравствуйте долго искал как это воплотить благодаря вам сделал
Увеличить фотографию с помощью позиционирования но вот загвоздка картинка открывается вбок и поэтому у людей с неширокими мониторами будет не вся видна подскажите что написать в коде чтобы изменить а точнее сдвинуть к центру экрана

как сейчас это выглядит можно увидеть на сайте
http://xn--51-8kcfemaodkveyaqedoqejz1ao.xn--p1ai/ NMitra Здравствуйте,

.blok1 img + img виталий нестёркин спасибо что -то уже получается правда при значении -370 картинка сильно убежала влево поставил 370 сместилась почти на нужное место
шас подберу нужное значение а вот left: 50% непонятный параметр менял на 10 % визуально нечего не изменилось что он регулирует и если понадобится каким параметром немного опустить в низ картинку? NMitra margin-top.

У вас две строки

Нижняя запись приоритетная, она перебивает значение left: 50%;
По хорошему нужно сделать так (я сразу этого не сделала, чтобы акцентировать ваше внимание на нужных свойствах)

Теория:
http://shpargalkablog.ru/2012/03/div-po-centru-html.html
http://shpargalkablog.ru/2012/03/vyrovnyat-tekst-vertikali.html
http://shpargalkablog.ru/2011/04/css-nalozhenie.html
http://shpargalkablog.ru/2011/03/svoistva-margin-padding.html виталий нестёркин Спасибо большое за помощь шас пока некогда ближе к ночи попробую
разобратса виталий нестёркин Наталья здравствуйте пытался написать вам письмо на адрес n.mitra@yandex.ru.письмо не отравилась
Ошибка
Недопустимый адрес
Адрес n.mitra@yandex.ru. не существует или заблокирован. Письмо не было послано виталий нестёркин прошу прошения за мою невнимательность просто когда вставлял адрес
не заметил точку после ru все нормально с ящикам Юрий Наташа, больше всего понравился вариант с transform: scale. Но при быстром перемещении курсора с одной соседней картинки на другую из границы "цепляются":
article img <
width: 100%;
height: 231px;
transition: 0.5s;
>

Читайте также:  Как играть в смайлы в вк

article img:hover <
transform: scale(1.5);
>

Видел в комментариях:
figure.vkl2:focus <
z-index: 100;
position: relative;
>

Но это не решает проблемы,т.к. в приоритете все равно будет какое-нибудь конкретное изображение. Может в таких случаях нужно задавать большее расстояние между img, чтобы они не "цепляли" друг друга? Или не указывать для изображений слишком большие размеры при наведении курсора? NMitra figure:hover, figure:focus <
z-index: 101;
> Юрий К сожалению, не помогло. Это моя вина, т.к. целиком не объяснил ситуацию. Дело в том, что изображения находятся внутри ячеек таблицы. Чтобы было более наглядно приведу код (в html все скобки удалил):

section
article
h2 Название статьи /h2
figure :first-child <
transform: translateX(-10px);
>

section > :last-child <
transform: translateX(10px);
>

figure img <
width: 100%;
height: 230px;
transition: 0.5s;
>

figure img:hover <
transform: scale(1.5);
position: relative;
z-index: 100;
>

Для крайних статей и всех изображений прописано transform. Может они конфликтуют? Хотя о возможности такого информации нигде не нашел.
NMitra Ничего не понимаю, нужна или ссылка на страницу или на пример на http://jsfiddle.net/ Юрий Половина кода все равно "улетела". Есть section, в которой три article. В каждом article размещено изображение. Далее:

section <
display: table;
width: 100%;
border-spacing: 10px;
>

За изменение масштаба изображения отвечает свойство transform с функцией scale() . В качестве её значения указывается число больше 1 для увеличения масштаба и меньше 1 — для уменьшения масштаба. К примеру, число 1.2 увеличивает масштаб на 20%.

Чтобы картинка увеличивалась при наведении на неё курсора мыши, свойство transform следует привязать к псевдоклассу :hover, как показано в примере 1.

Читайте также:  Возврат покупки в гугл плей

Анимационный эффект, который частично увеличивает изображение в блоке

Существует множество экранных луп для увеличения фрагмента изображений, но данный эффект подходит и для анимации фоновых картинок.

В этом решении не используются скрипты и оно является адаптивным.

Поместим одно и тоже изображение в разные контейнеры:

и добавим стили:

Немного о том, как что работает:

Мы размещаем две картинки друг на друге и урезаем контейнер для второй. Поскольку мы в 5 раз уменьшили контейнер второго изображения, чтобы не менялись пропорции, саму картинку нужно в 5 раз увеличить. А далее добавляем нужные нам эффекты и анимацию.

Ссылка на основную публикацию
Как убрать пароль с компьютера windows 8
Пароль, при входе в операционную систему – очень полезная, для многих пользователей, функция. Вы можете быть уверены, что на рабочем...
Как создать красную строку в ворде
Вопрос о том, как сделать в Word красную строку или, проще говоря, абзац, интересует многих, особенно малоопытных пользователей данного программного...
Как создать личный кабинет в мтс регистрация
Личный кабинет – это персональный раздел абонента на официальном сайте МТС, предназначенный для управления своим номером телефона и лицевым счетом....
Как убрать подтверждение я не робот
Технология «капчи» (CAPTCHA) представляет собой автоматизированный тест, предназначенный для выявления машинизированных пользователей, иначе ботов. Его целью становится постановка такой задачи,...
Adblock detector