Как заставить наложенное изображение заполнить весь экран в CSS? [дубликат] ⇐ CSS

[Anonymous]

Я пытаюсь, чтобы каждая из четырех кнопок на моей странице index.html отображала изображение при наведении курсора, которое закрывало бы весь экран. Я уже выяснил, как заставить наложение отображать изображение, которое находится впереди, благодаря z-index и как заставить курсор мыши «видеть» сквозь наложение благодаря событиям указателя. Теперь последнее, что мне нужно выяснить, это как сделать наложенное изображение такого же размера, как и вся страница.
До сих пор я пробовал масштабирование, размер фона: обложку, преобразование, встроенный размер и регулировка ширины и высоты. Я также много раз искал в Интернете и не нашел ничего, что могло бы решить мою проблему.
Вот мой текущий соответствующий CSS-код:

Код: Выделить всё

.audiobutton:hover, .photobutton:hover, .blenderbutton:hover, .videobutton:hover {
background-size: cover;
}

#overlay.videobutton:hover {
content: url(Renders/0004.png);
/* background-size: cover; */
aspect-ratio: 16/9;
width: 100%;
height: 100%;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: 5;
pointer-events: none;
}

&::after {
content: url(Renders/0004.png);
/* background-size: cover; */
/* inline-size: 100svw; */
/* block-size: 100svh; */
aspect-ratio: 16/9;
width: 100%;
height: 100%;
background-position: center;
background-repeat: no-repeat;
top: 0;
left: 0;
pointer-events: none;
z-index: 5;
opacity: 0;
}

#overlay:hover::after {
content: url(Renders/0004.png);
/* background-size: cover; */
aspect-ratio: 16/9;
width: 100%;
height: 100%;
position: absolute;
inset: 50%;
transform: translate(-50%, -50%);
inline-size: (100svw);
writing-mode: horizontal-tb;
block-size: (100svh);
z-index: 5;
opacity: 1;
}

Я также использовал Javascript в своем HTML для кнопки видео, которую я использую для проверки кода решения перед его применением к другим кнопкам. Вот как я добился того, чтобы наложение активировалось только при наведении курсора.

Код: Выделить всё

[url=video.html]
[img]Renders/4-alpha-v2.png[/img]
[/url]

[img]Renders/0004.png[/img]




function on() {
document.getElementById("overlay").style.display = "block";
}

function off() {
document.getElementById("overlay").style.display = "none";
}

Некоторые из моих CSS-кодов, вероятно, избыточны, и я хочу позаботиться об этом, как только у меня будет решение проблемы с размером наложения.

Подробнее здесь: https://stackoverflow.com/questions/792 ... een-in-css