Как сделать чтобы при наведении на картинку она увеличивалась html

Как сделать так, чтобы при наведении курсора картинка увеличивалась, но не выходила за границы соседних?

Коллеги, пожалуйста помогите! На сайте должна располагаться матрица из фотографий 3 на 3 и анимация, при наведении курсора на каждую из них, увеличивает слегка. Но при увеличении, увеличивающаяся картинка своими краями залезает на соседние. Как сделать, чтобы она как бы увеличивалась внутри?

#conteiner < position: absolute; margin: 25%; margin-top: 30px; flex-direction: row; >.kar1:hover < transform: scale(1.1); -webkit-transform: scale(1.1); -o-transform: scale(1.1); -moz-transform: scale(1.1); >.kar1

Вопрос задан более трёх лет назад
4081 просмотр

Комментировать

Решения вопроса 1

ovvivus

Для этого необходимо поместить каждое изображение в блок, и задать этому блоку overflow: hidden

Ответ написан более трёх лет назад

Нравится 2 1 комментарий

Увеличение картинки в блоке при наведении

Я новичок в мире веба и только учусь. Есть такая задача: при наведении курсора на блок требуется, чтобы блок и сама картинка увеличивалась. Я написал такой html:

.lesson-item < position: relative; min-height: 170px; max-width: 430px; width: 100%; z-index: 1; >.bottom < height: 25px; position: relative; padding: 0 0 0 20px; display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; >.lesson-item < transition: all 300ms linear 0ms; >.lesson-item:hover < transform: rotate(0deg) scale(1.2, 1.2); box-shadow: 0 10px 90px rgba(0, 0, 0, 0.4); z-index: 999; transition: transform 300ms linear 0ms, box-shadow 300ms linear 0ms, z-index 300ms linear 0ms; cursor: pointer; >.lesson-item:hover img

       asdasdasd   
 asdasd 21.08.2018
 
 
 
 asd asd asd asd asd +

Вот как нужно

Здесь блок увеличивается как надо, а картинка нет. Мне нужно, чтобы она увеличивалась именно так: Чтобы картинка увеличилась и блоки сместились вправо.

Увеличение изображения при наведении мышки CSS

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

Читать:

Для чего используется команда очистить

Применяемые картинки, сейчас они без какого-либо эффекта

Увеличение изображения при наведении мышки CSS (без рамки)

Увеличение изображения при наведении мышки CSS (в рамке)

Немного пояснений: Время трансформации занимает 1 секунду и задается, — transition: 1s; , а увеличение происходит при наведении с помощью — .scale:hover на величину 20 процентов — transform: scale(1.2); Плюсом использовано overflow то есть то, что должно отображаться за пределами блока. В нашем случае ничего, поэтому применяем атрибут hidden.

Может быть:

isible Отображается все содержание элемента, даже за пределами установленной высоты и ширины.

hidden Отображается только область внутри элемента, остальное будет скрыто.

scroll Всегда добавляются полосы прокрутки.

auto Полосы прокрутки добавляются только при необходимости.

inherit Наследует значение родителя.

Кроме того, появились дополнительные блоки div именно в них происходит ограничение, то есть обрезка контуров картинки class scale

Увеличение изображения при наведении мышки CSS с анимацией keyframes

Увеличение изображения с анимацией CSS (keyframes)

По факту в двух последних примерах была применена анимация, то есть прикручена анимация (animation: slide 3s ease-in-out infinite;): было прописано имя анимации, время. количество повторений. При этом не важно к чему прикрутить анимацию к классу, картинке или условию, hover, (мышка наведена на картинку) и добавлено само правило для анимации @keyframes slide.