Возможно ли «раснять» | увеличить ширину другим блоком?

Question

[First Name]

Всем доброго времени суток.
Не знаю как точно объяснить вопрос.но нужно чтобы при наведение на блок,он "растягивался".
Но так как это картинка,если ее растянуть,то ее кач-во потеряется.
Поэтому не могу понять,как можно сделать такое...
Прошу прощение за такое кривое объяснение.
P.S. Единственное что у меня на ум приходит - костыль.Сделать сбоку еще 1 блок,и при наведение делать его видимым.
P.P.S.Заранее благодарю за ответы.

Answer 1

[Ankhena]

Для увеличения используйте белую границу, белый фон подложки, тень в одну сторону и т.д.

Тень: codepen.io/Ankhena/pen/ALydrA

Comments

[First Name]

1.бордер не катит,так как при увеличение бордера,граница остается у границы дива,тоесть противоположная сторона уезжает(border-left:1000px solid white значит,правая картинка уехала вправо,за счет увеличения границы).
2.Тень такую большую не сделаешь)
3.Фон подложки можно подробнее?

[Ankhena]

Максим Теплов: В смысле тень такую большую не сделать? Какого размера зададите, такого и будет. Добавила ссылку на пример в ответ.

[Ankhena]

Максим Теплов: Для вариантов с бордером и фоном нужно использовать еще и отрицательный margin или translare или позиционирование.

Answer 2

[id_baton4eg]

если фон монотонный отцентрируй картинку и дальше css

.el1 {
width:300px;
}
.el1:hover {
width:400px;
}

Comments

[First Name]

Не совсем то)
Во-первых,ширина применяется как к правой стороне так и к левой.
Во-вторых,картинка в блоке(например касио) это фон,если растянуть блок,то растянется и картинка,то бишь будет ужасно.
Есть другие варианты?)

[id_baton4eg]

Максим Теплов:
по картинке - раз уж это фон можно сделать чуть больше разрешение какраз для увеличения и использовать background-size:cover; либо в % чтоб не появлялось искажение в соотношении сторон,
что касается второго элемента тут поможет тот же css:
.el2:hover .el1 {
width:400px;
}

[First Name]

Океей,кажется понял ход мыслей,буду пытаться)
Благодарю

[id_baton4eg]

Максим Теплов: незачто, надеюсь поможет)