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

【问题标题】：Display an image on top of another CSS using hover使用悬停在另一个 CSS 上显示图像
【发布时间】：2022-02-14 13:42:36
【问题描述】：

我正在尝试向我的着陆页添加一些悬停效果，但我无法在图像上进行悬停效果，标题和作者中的悬停我可以轻松做到.

我尝试了一些东西，但仍然做不到，我在 stackoverflow 上看到的解决方案是使用 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>

【问题讨论】：

这能回答你的问题吗？ How to show text on image when hovering?
@GucciBananaKing99 我正在尝试使用此解决方案来解决它，但我不想显示文本，而是显示图像，就像它在帖子的第一张图片上显示的那样。
悬停应该在什么时候发生，它应该显示什么以及如何显示？
@andys 当我的鼠标进入“NFT”图像时，它应该在 NFT 图像顶部显示一个background-color: cyan;，并在第一张图像上显示眼睛图标。

标签： html css hover

【解决方案1】：

没有position: absolute，我想不出别的办法但我已经为您创建了一个示例，其中图像使用flex boxhttps://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;
}

【讨论】：

哇，太感谢了，效果很好，分辨率不是很懂，但是一定会好好研究的，太感谢了！
询问您是否有问题，以便您在下次使用时学习。你说的分辨率是什么意思？也标记为答案，以便下一个人进来时知道它已解决。
我不理解position: absolute 和position: relative，但现在我研究了我确实理解了解决方案，也很抱歉我忘记将问题标记为已回答，对所有人来说都是新的这东西哈哈。
很高兴能为您提供帮助。