Display an image on top of another CSS using hover

Question

I'm trying to add some hover effects to my landing page and i'm stuck at doing the hover effect at the image, the hover in the title and author I was able to do easily.

I tried some stuff but I still couldn't do, the solutions that I saw here on stackoverflow was using position: absolute, but I was looking for some other solution (if there is).

If the main solution is using position: absolute and you want to please help me understand, I find very difficult to understand and use position: absolute.

Here's how my page look like right now

: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>

Does this answer your question? [How to show text on image when hovering?](https://stackoverflow.com/questions/14263594/how-to-show-text-on-image-when-hovering) — GucciBananaKing99, Feb 13 '22 at 18:54
@GucciBananaKing99 I'm trying to solve it using this solution, but I do not want to display an text, but an image, like it's shown on the first image on the post. — fabinfabinfabin, Feb 13 '22 at 19:08
When should the hover happen and what and how it should display? — andys, Feb 13 '22 at 19:19
@andys When my mouse goes in the image of the "NFT" it should display an `background-color: cyan;` on top of the NFT image with the eye icon shown on the first image. — fabinfabinfabin, Feb 13 '22 at 19:21

score 0 · Accepted Answer · answered Feb 13 '22 at 19:40

0

i cannot think of another way without position: absolute but i have created you an example where the the image is positioned automatically on the center using flex box https://jsfiddle.net/r5Lfcbh8/2/

Edit i use position relative on the parent div as relative make the children absolute top left 0 same as relative.

<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;
}

answered Feb 13 '22 at 19:40

andys

94
6

Wow, thank you so much, it works perfectly, I don't quite understand the resolution, but I will for sure study it a lot, thank you so much! – fabinfabinfabin Feb 14 '22 at 01:52
ask if you have questions so you learn for the next time you use it. what do you mean by resolution? also mark as answer so when next person come in to know its resolved. – andys Feb 14 '22 at 06:17
I didn't understand the `position: absolute` and `position: relative`, but now that i've studied I do understand the solution, also sorry that I forgot to mark the question as answered, new to all this stuff lol. – fabinfabinfabin Feb 16 '22 at 20:35
I am glad i could be of help. – andys Feb 17 '22 at 10:12

Display an image on top of another CSS using hover

1 Answers1