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

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 >
    <img src="/images/image-equilibrium.jpg" alt="Image Equilibrium" >
    <!-- <span ></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" ><span >0.041 ETH</span>
    <img src="/images/icon-clock.svg" alt="Clock" ><span >3 days left</span>
    <div ></div>
    <img src="images/image-avatar.png" alt="creator" >
    <span class='creation'>Creation of </span><span >Jules Wyvern</span>


  </div>

  <div >
    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%);
}

CodePudding user response：

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 >
  <span ></span>
  <img src="https://via.placeholder.com/300" />
  <i></i>
</div>
<br>
<h3>NOT Active</h3>
<div >
  <span ></span>
  <img src="https://via.placeholder.com/300" />
  <i></i>
</div>

CodePudding user response：

A solution could be to add mix-blend-mode to a sibling of the img.

In your example I added the "blender" div. This div contains the original image and a div whith class "img-blender".

To this div I added a background of cyan, for test purposes, and a mix-blend-mode: color;

Please see my codepen.

I slightly changed the HTML to show a demo image:

    <!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 >
    <div >
    <img src="https://images.ctfassets.net/hrltx12pl8hq/7yQR5uJhwEkRfjwMFJ7bUK/dc52a0913e8ff8b5c276177890eb0129/offset_comp_772626-opt.jpg?fit=fill&w=800&h=300" alt="Image Equilibrium" >
      <div ></div>
      </div>
    <!-- <span ></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" ><span >0.041 ETH</span>
    <img src="/images/icon-clock.svg" alt="Clock" ><span >3 days left</span>
    <div ></div>
    <img src="images/image-avatar.png" alt="creator" >
    <span class='creation'>Creation of </span><span >Jules Wyvern</span>


  </div>

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

And here is the CSS

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

.blender {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 1fr;  
}

.img-1,
.img-blender {
  grid-column: 1 / 2;
  grid-row: 1 / 2;
  margin-top: 30px;
  width: 80%;
  border-radius: 5%;  
  justify-self: center;
}

.img-1 {  
  display: block;
  margin-left: auto;
  margin-right: auto;  
}

.img-blender {
  mix-blend-mode: color;
  background-color: cyan;
}

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