Cargo Collective - 悬停图像位置 CSS 编辑

如何解决Cargo Collective - 悬停图像位置 CSS 编辑

有点外行，并试图弄清楚如何在 Cargo 比例上按比例获得悬停图像并在不同的屏幕分辨率下覆盖全屏。

https://projectnativeinformant.online/kbe-test-two-copy

某些图像需要完全全屏显示（例如，在示例中悬停在 AAAAA 上时） - 但这不适用于覆盖桌面上的屏幕。 某些图像需要居中且更小（例如，当悬停在 ddddD 或 HHHHH 上时）

Cargo CSS 在下面，有人可以推荐任何编辑，以便像背景视频一样按比例缩放吗？如果全出血最简单，我可以为其他图像制作具有透明度的 PNG。

非常感谢，希望这有点道理！ 克里斯

        .hover-title {
    display: inline;
    pointer-events: auto;
    cursor: pointer;
}

.hover-image {
    visibility: hidden;
}

body:not(.mobile) .hover-title:hover + .hover-image {
    visibility: visible;
    pointer-events: none;
}

.hover-image {
    display: flex;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    z-index: -1;
    pointer-events: none;
    flex-direction: column;
    align-items: center;
    justify-content: center;

/* Change width and height to scale images */
    width: 90vw;
    height: 90vh;
}

.hover-image img {
    max-width: 100% !important;
    max-height: 100% !important;
    width: auto !important;
    height: auto !important;
    margin-bottom: 0;
}

然后这就是当前的 CSS 外观（无可否认，这毫无意义）：

.hover-title {
    display: inline;
    pointer-events: auto;
    cursor: pointer;
}

.hover-image {
    visibility: hidden;
}

body:not(.mobile) .hover-title:hover + .hover-image {
    visibility: visible;
    pointer-events: none;
}

.hover-image {
    display: flex;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    z-index: 1;
    pointer-events: none;
    flex-direction: column;
    align-items: center;
    justify-content: center;

/* Change width and height to scale images */
    width: flex;
    height: flex;
}

.hover-image img {
    max-width: flex;
    max-height: flex;
    width: flex;
    height: flex;
    margin-bottom: 0;
}