Editing an image in CSS

How would I add, or put color over the image in 2 spots?

From this

to this

Hi there asasass,

here is an example for you to play around with…

<!DOCTYPE HTML>
<html lang="en">
<head>

<meta charset="utf-8">
<meta name="viewport" content="width=device-width,height=device-height,initial-scale=1">

<title>untitled document</title>

<!--<link rel="stylesheet" href="screen.css" media="screen">-->

<style media="screen">
body {
    background-color: #f0f0f0;
    font: 1em/160% verdana, arial, helvetica, sans-serif;
 }

#container {
    position: relative;
    width: 60%;
    padding-top: 40%;
    margin: auto;
    border: 0.062em solid #999;
    background-image: url(http://coothead.co.uk/images/blood.jpg);
    background-size: contain;
 }

#container div {
    position: absolute;
    top: 0;
    width: 100%;
    height: 100%;
    background-image: linear-gradient( 
        to bottom, 
        rgba( 255, 255, 255, 0.75 ) 0%, 
        rgba( 255, 255, 255, 0.75 ) 42%, 
        transparent 42%,
        transparent 68%,
        rgba( 255, 255, 255, 0.75 ) 68%, 
        rgba( 255, 255, 255, 0.75 ) 100% ); 
 }

#container div span{
    position: absolute;
    top: 54%;
    left: 50%;
    transform: translate( -50%, -54% );
    font-size: 4vw;
    color: #fff;
    text-transform: uppercase;
    text-shadow:
		0 0.15em 0.3em #000,
		0 -0.15em 0.3em #000,
		0.15em 0 0.3em #000,
		0.15em 0 0.3em #000,
		0 0 1em #000;
 }
</style>

</head>
<body> 

 <div id="container">

  <div><span>text</span></div>

 </div>

</body>
</html>

coothead

2 Likes

Yes. That works, thanks.

Well, it’s basically what you’ve already done before. :winky:

Instead of using “to right” it used “to bottom” .

coothead

2 Likes

Can I use something other than linear-gradient?


<style media="screen">

#container {
    position: relative;
    width: 320px;
    height:320px;
    margin: auto;
    background-image: url(https://i.imgur.com/sBqw4Os.png);
    background-size: contain;
 }

#container div {
    position: absolute;
    top: 0px;
    width: 100%;
    height: 100%;
    background-image: linear-gradient( 
        to bottom, 
        rgba( 255, 255, 255, 0.75 ) 0, 
        rgba( 255, 255, 255, 0.75 ) 42%, 
        transparent 42%,
        transparent 68%,
        rgba( 255, 255, 255, 0.75 ) 68%, 
        rgba( 255, 255, 255, 0.75 ) 100% ); 
 }


</style>


 <div id="container">

  <div></div>

 </div>

Such as what? (A pictoral example will do.)

Background color instead.

One color
middle block transparent
Another color

Are you going to use transitions again?

If so, keep in mind that background-image does not transition, background color does.

Seeing that these are just audio player apps then you can use those :pseudo before/after elements to hook and position the other two colors to.

One color would be a bg color on the main container.

1 Like

Can I replicate this:

Using ::before, ::after

I tried

This has nothing to do with an audio player.

Only doing something to an image.

You can do all manner of things with the coding
knowledge that you have acquired. :winky:

Just breath in and out gently and rhythmically to set
your mind free and unencumbered. :sunglasses:

Here is an example obtained whilst using this method…

<!DOCTYPE HTML>
<html lang="en">
<head>

<meta charset="utf-8">
<meta name="viewport" content="width=device-width,height=device-height,initial-scale=1">

<title>untitled document</title>

<!--<link rel="stylesheet" href="screen.css" media="screen">-->

<style media="screen">
body {
    background-color: #f0f0f0;
    font: 1em/160% verdana, arial, helvetica, sans-serif;
 }

#container {
    position: relative;
    width: 60%;
    padding-top: 40%;
    margin: auto;
    border: 0.062em solid #999;
    background-image: url(http://coothead.co.uk/images/blood.jpg);
    background-size: contain;
 }

#container div {
    position: absolute;
    width: 100%;
    background-image: url(http://coothead.co.uk/images/buddha.jpg);
    background-size: 100% auto; 
 }

#container div:first-of-type {
    top: 0;
    height: 42%;
 }

#container div:last-of-type {
    bottom: 0;
    height: 32%;
    background-position: 0 100%;
    
 }

#container span{
    position: absolute;
    top: 54%;
    left: 50%;
    transform: translate( -50%, -54% );
    font-size: 4vw;
    color: #fff;
    text-transform: uppercase;
    text-shadow:
		0 0.15em 0.3em #000,
		0 -0.15em 0.3em #000,
		0.15em 0 0.3em #000,
		0.15em 0 0.3em #000,
		0 0 1em #000;
 }
</style>

</head>
<body> 

 <div id="container">
  <div></div>
  <div></div>
  <span>om</span>
 </div>

</body>
</html>

1 Like

So are you wanting, One color, middle block transparent, Another color, on top of said image

EDIT:

How would I add, or put color over the image in 2 spots?

Ok, I see this from your 1st post

If that’s the case the image can be th BG image of the container, then 2 pseudos could be the overlay colors

One color:

middle: 157px transparent
background-image: url(https://i.imgur.com/sBqw4Os.png);

another color

on top of an image.

What would I need to adjust in this?

Well from that link I would have nested the color div like this


<div class="container">
  <div class="color"></div>
</div>

So all the positioning is relative to the container, you already got your image as the BG image, That’s good

Now you have 5 hooks available to style with that html

2 pseudos on the container
2 pseudos on the color
And the color div itself

2 Likes

Surely you could have worked this out by now.:rolleyes:

<!DOCTYPE HTML>
<html lang="en">
<head>

<meta charset="utf-8">
<meta name="viewport" content="width=device-width,height=device-height,initial-scale=1">

<title>untitled document</title>

<!--<link rel="stylesheet" href="screen.css" media="screen">-->

<style media="screen">
body {
    background-color: #f0f0f0;
    font: 1em/160% verdana, arial, helvetica, sans-serif;
 }

#container {
    position: relative;
    width: 60vw;
    padding-top: 40vw;
    margin: auto;
    border: 0.062em solid #999;
    background-color:#000;
    background-size: contain;
 }

#container::before, 
#container::after {
    content: '';
    position: absolute;
    width: 100%;
 }

#container::before {
    top: 0;
    height: 42%;
    background-color: #ccc;
 }

#container::after {
    bottom: 0;
    height: 32%;
    background-color: #ccc;
 }

#container span{
    position: absolute;
    top: 54%;
    left: 50%;
    transform: translate( -50%, -54% );
    font-size: 4vw;
    color: #ccc;
    text-transform: uppercase;
 }
</style>

</head>
<body> 

 <div id="container">
  <span>grey</span>
 </div>

</body>
</html>

coothead

1 Like

That’s way better.

@asasass, do you understand how @coothead’s code works?

How would I push the top down without decreasing the 157px in the middle?

How would I keep that at 157px when I push the top down?

When I push the top down, I want the bottom grey color to move down too.
So it stays at 157px in the middle of both.

Like this:

#container::before, 
#container::after {
    content: '';
    position: absolute;
    width: 100%;
  margin-top:50px;
 }

Hi there asasass,

this code does not use “position” or “%”

<!DOCTYPE HTML>
<html lang="en">
<head>

<meta charset="utf-8">
<meta name="viewport" content="width=device-width,height=device-height,initial-scale=1">

<title>untitled document</title>

<!--<link rel="stylesheet" href="screen.css" media="screen">-->

<style media="screen">
body {
    background-color: #f0f0f0;
    font: 1em/160% verdana, arial, helvetica, sans-serif;
 }

#container {
    width: 60vw;
    padding:2.8vw 0;
    margin: auto;
    border: 0.062em solid #000;
    background-color:#000;
    text-align: center;
 }

#container::before, 
#container::after {
    content: '';
    display: block;
 }

#container::before {
    height: 14vw;
    background-color: #ccc;
 }

#container::after {
    height: 10vw;
    background-color: #ccc;
 }

#container span{
    display: inline-block;
    line-height: 10.4vw;
    line-height: 10vw;
    font-size: 4vw;
    color: #ccc;
    text-transform: uppercase;
 }
</style>

</head>
<body> 

 <div id="container">
  <span>grey</span>
 </div>

</body>
</html>

coothead