Разверните div в полноэкранном режиме с помощью прокрутки

Question

Я пытаюсь создать «сложную» анимацию, в которой элемент div в карусели (простой родитель с прокруткой по оси X) при нажатии расширяется до полноэкранного режима.

Я пробую разные варианты, но не могу получить результат.

Здесь скрипка

На самом деле я пытаюсь скрыть остальные и удалить переполнение, но не могу развернуть узел в полноэкранном режиме.Я должен использовать абсолютное позиционирование, но таким образом я не могу расположить div в горизонтальной прокрутке.

document.querySelectorAll(".project").forEach(function(n) {
n.onclick = e => {
console.log("deee", e.clientY, e.clientX);

document.querySelector(".carousel").style.overflowX = "visible";

e.currentTarget.classList.add("opened");
document.querySelectorAll(".project:not(.opened)").forEach(n => {
  n.style.display = "none";
});
return;

};});

Кто-нибудь может указать мне правильное направление?

Answer 1

Попробуйте изменить коды в вашем CSS с помощью селектора .project.opensed с этим

.project.opened {
  position: absolute;
  left: 0;
  width: 100%;
  height: 100%;
  margin: 0;
}