使用悬停在另一个 CSS 之上显示图像

Question

我正在尝试向我的着陆页添加一些悬停效果，但我一直坚持在图片上做悬停效果，悬停在标题和作者 I能够轻松做到。

我尝试了一些东西，但我仍然做不到，我在 Whosebug 上看到的解决方案是使用 position: absolute，但我正在寻找其他解决方案（如果有的话）。

如果主要解决方案是使用position: absolute，你想请帮助我理解，我觉得很难理解和使用position: absolute。

这是我的页面现在的样子

:root {
    --soft-blue: hsl(215, 51%, 70%);
    --cyan: hsl(178, 100%, 50%);
    --main-bg: hsl(217, 54%, 11%);
    --card-bg: hsl(216, 50%, 16%);
    --line: hsl(215, 32%, 27%);
    --white: hsl(0, 0%, 100%);
    --font-size: 18px;
    --font: 'Outfit', sans-serif;
}

body {
    margin: 0;
    font-family: var(--font);
}

.page {
    display: flex;
    height: 100vh;
    background-color: var(--main-bg);
    justify-content: center;
    align-items: center;
}

.page__container {
    box-sizing: border-box;
    padding: 20px 20px 0px 20px;
    background-color: var(--card-bg);
    width: 400px;
    height: 650px;
    border-radius: 20px;
}

.page__container img {
    margin: 0;
    max-width: 100%;
    max-height: 100%;
    border-radius: 10px;
}

.page__container h1 {
    color: var(--white);
    font-size: 26px;
    margin: 15px 0 10px;
}

.page__container h1 a {
    color: var(--white);
    text-decoration: none;
}

.page__container .description {
    margin: 0;
    font-weight: 400;
    color: var(--soft-blue);
    font-size: 20px;
}

.price-deadline {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.eth {
    display: flex;
    align-items: center;
}

.eth .eth-icon {
    max-height: 18px;
    max-width: 11px;
    margin-right: 5px;
}

.eth .eth-price {
    color: var(--cyan);
}

.deadline {
    display: flex;
    align-items: center;
}

.deadline .clock-icon {
    max-width: 17px;
    max-height: 17px;
    margin-right: 5px;
}

.deadline .due-date {
    font-weight: 600;
    color: var(--soft-blue);
}

.divisor {
    height: 1px;
    background-color: var(--soft-blue);
    border: none;
}

.author {
    display: flex;
    align-items: center;
    padding-top: 10px;
}

.author .avatar {
    border: 1px solid white;
    border-radius: 50px;
    max-height: 40px;
    max-width: 40px;
    margin-right: 10px;
}

.author .credits {
    color: var(--soft-blue);
}

.author a {
    font-size: 16px;
    color: var(--white);
    text-decoration: none;
}

/* Hover Section */

.author a:hover {
    color: var(--cyan);
}

.text h1 .link:hover {
    color: var(--cyan);
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="style.css">
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;600&display=swap" rel="stylesheet">
    <link rel="shortcut icon" href="./images/favicon-32x32.png" type="image/x-icon">
    <title>NFT Preview Card</title>
</head>
<body>
    <div class="page">
        <div class="page__container">
            <img src="./images/image-equilibrium.jpg" alt="" class="equilibrium">

            </p>
            <div class="text">
                <h1><a href="#" class="link">Equilibrium #3429</a></h1>
                <p class="description">
                    Our Equilibrium collection promotes
                    balance and calm.
                </p>
                <div class="price-deadline">
                    <div class="eth">
                        <img src="./images/icon-ethereum.svg" alt="" class="eth-icon">
                        <p class="eth-price">0.041 ETH</p>
                    </div>
                    <div class="deadline">
                        <img src="./images/icon-clock.svg" alt="" class="clock-icon">
                        <p class="due-date">3 days left</p>
                    </div>
                </div>
            </div>
            <hr class="divisor">
            <div class="author">
                <img src="./images/image-avatar.png" alt="" class="avatar">
                <p class="credits">
                    Creation of <a href="#">Jules Wyvern</a>
                </p>
            </div>
        </div>
    </div>
</body>
</html>

Answer 1

没有position: absolute我想不出别的办法但我为您创建了一个示例，其中图像使用 flex box https://jsfiddle.net/r5Lfcbh8/2/

自动定位在中心

编辑我在父级 div 上使用相对位置作为相对，使子级绝对左上角 0 与相对相同。

<div class="overlayPar">
    <img src="https://media.marketrealist.com/brand-img/LyxvUFSpl/0x0/nft-black-1617613285599.jpg" alt="" class="equilibrium">
    <div class="imgOverlay">
        <span class="eye"></span>
    </div>
</div>


.overlayPar {
  position: relative;
}

.imgOverlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 255, 247, .4);
  display: none;
}

.imgOverlay .eye {
  background: white;
  width: 25px;
  height: 25px;
  display: block;
  margin: auto;
}

.overlayPar:hover .imgOverlay  {
  display: flex;
}

.equilibrium {
  display: block;
}

使用悬停在另一个 CSS 之上显示图像

Display an image on top of another CSS using hover

html

css

hover