Раскрытие блока во внешний блок с анимацией?

Question

[ich_heisse_erich]

Здравствуйте, не могу решить задачу. Нужно чтобы в секции состоящий из 4 блоков блоки раскрывались при клике, причем раскрывались на всю секцию сдвигая всё остальное или перекрывая их. Схему приложил.
Красным пунктиром обозначено раскрытие блока и направление

БЛОК после раскрытия имеет такую структуру, где полосы это текст

Comments

[Rustam Bainazarov]

JS, если хотите, чтобы блоки плавно сдвигали другие, и всё это перестраивалось.

[ich_heisse_erich]

Рустам Байназаров, а если без js, то может как-то с z index и display none у других блоков?

[Kovalsky]

ich_heisse_erich, то есть существует например четыре блока. Пользователь кликает на один из блоков и... что должно происходить?

[ich_heisse_erich]

Никита Полевой, блок должен раскрываться, убирается превьюшка и добавляется контент

[Kovalsky]

ich_heisse_erich, мой вопрос как раз имел целью раскрыть смысл фразы "блок должен раскрываться". Блок становится больше или из него вылетают еще блоки? Что за превьюшка? Куда добавляется контент? От этих деталей зависит реализация

[ich_heisse_erich]

Можно ли задать блоку при клике width 100% height 100% и активировать контентную часть display block

[Rustam Bainazarov]

ich_heisse_erich, нет, всё будет происходить мгновенно. Анимирования перестраивания элементов сетки не будет.

Z-index и display не анимируются.

[ich_heisse_erich]

Никита Полевой, в общем задумка такая, сначала в блоке изображение, при нажатии на изображение блок раскрывается и появляется текстовая часть. Как бы описание. Но контента там много, поэтому нужно что бы блок принял размеры родителя

[Jacket]

ich_heisse_erich, размеры родителя и блоков фиксированы?

[ich_heisse_erich]

Jacket, Да

Answer 1

[RAX7]

Вот тебе еще вариант

Answer 2

[Сергей c0re]

Может как-то так?



или вот так с позиционированием элементов:

Comments

[ich_heisse_erich]

Твой вариант очень похож на то что нужно, только вот можно ли твой вариант обьединить с верхним? в плане того что блоки по разному раскрываться должны, правый блок должен раскрываться влево. Кароче получится ли здесь использовать transform-origin?

[Сергей c0re]

ich_heisse_erich, возможно придется позиционировать внутри контейнера, вместо inline-block и flex, т.к. при увеличении размеров все ползет и не туда куда надо ))

см. ответ, дополнил.

[ich_heisse_erich]

Сергей, Шикарно! Слушай получается ты к каждому блоку добавил собственный класс, который привязывает его четко по положению? а ещё ты добавил кода js, а за что отвечают дополнительные строки?

document.body.addEventListener('click', onClick)

function onClick(e) {
  if (e.target.matches('.block') || e.target.parentNode.matches('.block')) {
    e.target.closest(".block").classList.toggle('expanded')
    document.querySelectorAll(".block").forEach( el => {
    	if ( el != e.target.closest(".block") ) {
      	el.classList.toggle('hide');
      }
    });
  }
}

[ich_heisse_erich]

Сергей, Конкретно вот эта часть меня путает

.forEach( el => {
    	if ( el != e.target.closest(".block") ) {
      	el.classList.toggle('hide');

[Сергей c0re]

ich_heisse_erich,
см. .forEach
используется вместо цикла, выполняет функцию на каждом элементе массива.

в скобках стрелочная функция

это можно было записать как

.forEach( function (el) {
...
})

в данном месте всем блокам кроме того по которому кликнули переключается класс .hide
и происходит трансформация видимости, блоки плавно исчезают/появляются.

[Сергей c0re]

ich_heisse_erich, на картинку в стилях ставишь

float:left;

на параграф

margin: 0px;

и текст обтекает картинку справа.

[ich_heisse_erich]

Сергей, Спасибо большое!)

Answer 3

[Ragtime Kitty]

Есть еще такой вариант

Comments

[ich_heisse_erich]

Спасибо! Такой вариант тоже можно использовать)

Answer 4

[hzzzzl]

transform-origin
впрочем есть одно но - если в блоке будет контент, то он тоже заскейлится, но наверн че то можно придумать

Comments

[ich_heisse_erich]

Да, контент тоже скейлится, и я не знаю как решить эту проблему

[ich_heisse_erich]

sashabeep, Сейчас приложу схему блока