Css image color overlay query-CodePudding

I am a newbie to html and css i was trying frontend mentor challenge i have shared some images of my work and the challenge this is my work

i have made two divs one containing image and other is empty and and stacked on top of each other and empty div has a back ground color and given an opacity but i am not achieving desired result

this is the challenge

here is my css code

this is my html code

CodePudding user response：

First of all, change the font :D After than, you can consider looking into CSS Grid. It makes a layout like that made easy, i will show you an example.

.container{
    
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        justify-content: center;
        align-items: center;
        height: 50vh;
    
}
.left{
    display: grid;
    grid-template-rows: repeat(3.1fr);
}

.numbers{
    display: grid;
    grid-template-columns: repeat(3,1fr);
}

<!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">
    <title>Document</title>
    <link rel="stylesheet" href="/style.css">
</head>
<body>
    <div >
        <div >
            <h1>Get insights that help your business grow</h1>
            <p>Text here</p>
            <div >
                <div>
                    <h1>10k </h1>
                    Companies
                </div>
                <div>
                    <h1>314 </h1>
                    Templates
                </div>
                <div>
                    <h1>12M </h1>
                    Queries
                </div>
            </div>
        </div>
        <div >
            <img src="https://source.unsplash.com/random" alt="">
        </div>
    </div>
</body>
</html>

P.S. Make sure you run the Code Snippet in full page, so you can try and understand it, hopefully you can understand CSS Grid more :D

CodePudding user response：

You can apply a series of filters to an image using CSS.

I got this one by searching 'change image to purple by filter' at https://www.codegrepper.com/code-examples/css/purple filter css

img {
  filter: grayscale(100%) brightness(70%) sepia(50%) hue-rotate(-100deg) saturate(500%) contrast(1);
}

<img src="https://picsum.photos/id/1015/200/300">

CodePudding user response：

Use linear-gradientinstead of hsl And Change you're layout ,,, And remember you have two .overlay class

.overlay{
    background: transparent linear-gradient(#c15cff 0%,#c15cff 0%) 0 0 no-repeat padding-box;
    opacity:0.5;
    width:100%;
    height:100%;
    }
    .bg{
    width:100px;
    height:100px;
    }

<div  style="background:url('https://i.stack.imgur.com/JgSKx.png') no-repeat 10% 10%;background-size: cover;">
        <div >
            </div>
                    </div>