How do i put the cyan color on top of my image while the image is in active state?

I want to put the cyan effect while the image is in active state. How can i do that?

I want my image to look like this while it is in active state. I tried using overlay effect but it doesn't seem to work. I want the image to look like the attached image . I tried creating an empty div with overlay class and try to add some width height opactiy to the overlay but the overlay doesnt appear on the image, it goes below the image and stays there.

    <!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <!-- displays site properly based on user's device -->

  <link rel="icon" type="image/png" sizes="32x32" href="./images/favicon-32x32.png">
  <link rel="stylesheet" href="style.css">

  <title>Frontend Mentor | NFT preview card component</title>


</head>
<body>

  <div class="container">
    <img src="/images/image-equilibrium.jpg" alt="Image Equilibrium" class="img-1">
    <!-- <span class="overlay"></span> -->
    <!-- <img src="/images/icon-view.svg" alt="view" class='view'> -->
    <h1>Equilibrium #3429</h1>
    <p>Our Equilibrium collection promotes balance and calm.</p>
    <img src="/images/icon-ethereum.svg" alt="Ethereum" class="img-2"><span class="eth">0.041 ETH</span>
    <img src="/images/icon-clock.svg" alt="Clock" class="img-3"><span class="clock">3 days left</span>
    <div class="line"></div>
    <img src="images/image-avatar.png" alt="creator" class="img-4">
    <span class='creation'>Creation of </span><span class="creator">Jules Wyvern</span>


  </div>

  <div class="attribution">
    Challenge by <a href="https://www.frontendmentor.io?ref=challenge" target="_blank">Frontend Mentor</a>.
    Coded by <a href="https://www.linkedin.com/in/nelson-uprety-951a2b156/">Nelson Uprety</a>.
  </div>
</body>
</html>


@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;600&family=Raleway:wght@800&family=Roboto:wght@300&display=swap');

* {
    box-sizing: border-box;
}

body {
    font-family: 'Outfit', sans-serif;
    background-color: hsl(217, 54%, 11%);
}

.container {
    background-color: hsl(216, 50%, 16%);
    height: 570px;
    width: 350px;
    border-radius: 5%;
    margin: 40px 60px;
    display: inline-block;
}

.img-1 {
    display: block;
    margin-left: auto;
    margin-right: auto;
    margin-top: 30px;
    width: 80%;
    border-radius: 5%;
}

h1 {
    font-size: 1.5em;
    font-weight: 600;
    color: hsl(0, 0%, 100%);
    margin-left: 32px;
}

h1:hover,
h1:active {
    color: hsl(178, 100%, 50%);
    cursor: pointer;
}

p {
    font-size: 18px;
    /* color: rgba(248, 245, 245, 0.5); */
    color: hsl(215, 51%, 70%);
    font-weight: 300;
    margin-left: 30px;
}

.img-2 {
    margin-left: 20px;
    margin-top: 5px;
    padding-right: 10px;
}

.img-3 {
    margin-left: 130px;
}

.img-4 {
    width: 20%;
    margin-left: 20px;
    padding-right: 30px;
}

.eth {
    color: hsl(178, 100%, 50%);

}

.clock {
    color: hsl(215, 51%, 70%);
}

.line {
    margin: 20px;
    border-bottom: 1px solid hsl(215, 32%, 27%);
}

.creation {
    color: hsl(215, 51%, 70%);
}

.creator {
    color: hsl(0, 0%, 100%);
}

.creator:active,
.creator:hover {
    color: hsl(178, 100%, 50%);
    cursor: pointer;
}

.attribution {
    font-size: 11px;
    text-align: center;
}

.attribution a {
    color: hsl(228, 45%, 44%);
}

you need to replace the <i> with another icon to look better

*,
*::after,
*::before {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.image-wrapper {
  width: 300px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

.image-wrapper img {
  border-radius: 40px;
}

i {
  display: none;
}

.overlay {
  display: none;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 300px;
  background: rgba(255, 0, 0, 0.3);
  border-radius: 40px;
}

.active i,
.active .overlay {
  display: block;
}


/* not important*/

i {
  height: 50px;
  width: 50px !important;
  background: blue;
  z-index: 9;
  border-radius: 100%;
  position: absolute;
}

<h3>Active</h3>
<div class="image-wrapper active">
  <span class="overlay"></span>
  <img src="https://via.placeholder.com/300" />
  <i></i>
</div>
<br>
<h3>NOT Active</h3>
<div class="image-wrapper">
  <span class="overlay"></span>
  <img src="https://via.placeholder.com/300" />
  <i></i>
</div>

How do i put the cyan color on top of my image while the image is in active state?

Related

Recent Posts