Placing gradient over image, and before the SVG

Question

What I'm trying to do is get it to look like this.

But it looks like this.

How do I fix it so it looks like how I want it to look?

All help would be greatly appreciated.

I was thinking something like this, but I can't get it to work.

  #grad {
    position: absolute;
    top: 0;
    left: 0;
    width: 260px;
    height: 194px;
    background-color: transparent;
    background-image: linear-gradient( to right, transparent 0, transparent 83px, #0059dd 83px, #0059dd 86px, transparent 86px, transparent 174px, #0059dd 174px, #0059dd 177px, transparent 177px, transparent 260px);
  }

 <div id="grad"></div>

That's basically it, it keeps asking me to provide more info.That's basically it, it keeps asking me to provide more info.That's basically it, it keeps asking me to provide more info.That's basically it, it keeps asking me to provide more info.That's basically it, it keeps asking me to provide more info.

<style>
  #playButton5 {
    position: relative;
    width: 266px;
    height: 250px;
    cursor: pointer;
    background-color: #000000;
    background-image: linear-gradient( to right, transparent 0, transparent 86px, #0059dd 86px, #0059dd 89px, transparent 89px, transparent 177px, #0059dd 177px, #0059dd 180px, transparent 180px, transparent 266px);
    box-Shadow: inset 0 0 0 3px #0059dd;
    background-repeat: no-repeat;
  }

.initial {
    background-color: transparent;
 }

.initial line {
    stroke-width: 6;
    stroke: #f00; 
 }

.initial circle {
    stroke-width: 6;
    stroke: #f00; 
    fill: black;
 } 

  .button2 div {
    width: 44px;
    height: 44px;
    top: 102px;
    left: 116px;
    background-color: transparent;
    background-size: 14px 18px;
    background-repeat: no-repeat;
    border-radius: 50%;
    position: absolute;
  }

</style>

<div id="playButton5" onclick=" 
var button = document.getElementById('playButton5');
var player = document.getElementById('player5');
player.volume=1.0; if (player.paused) {
document.querySelector('#playButton5 .pause').style.display='inline-block';
document.querySelector('#playButton5 .play').style.display='none';
player.play();
} else {
document.querySelector('#playButton5 .pause').style.display='none';
document.querySelector('#playButton5 .play').style.display='inline-block';
player.pause();
}">

  <svg class="initial" width="266" height="250" viewbox="0 0 266 150">
<image x="0" y="-50" width="266" height="250" xlink:href="https://i.imgur.com/sVt3ks7.png" />
    <line x1="6" y1="75" x2="32" y2="75" ></line>
    <line x1="39" y1="75" x2="111" y2="75" ></line>
    <line x1="86" y1="44" x2="192" y2="105" ></line>
    <line x1="137" y1="12" x2="137" y2="136" ></line>
    <line x1="86" y1="105" x2="192" y2="44" ></line>
    <line x1="152" y1="51" x2="188" y2="-12" ></line>
    <line x1="191" y1="-17" x2="205" y2="-40" ></line>
    <line x1="151" y1="98" x2="188" y2="161" ></line>
    <line x1="191" y1="166" x2="205" y2="188" ></line>
    <circle cx="138" cy="74" r="24.5"></circle>
  </svg>

  <div class="button2">
    <div class="play" style="background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNiIgaGVpZ2h0PSIyMCIgdmlld0JveD0iMCAwIDEyMjYgMTQ4MSI+CjxwYXRoIGQ9Ik0wIDEzOTRWODdDMCA0Ni4zIDEzLjMgMTkuOCA0MCA3LjUgNjYuNy00LjggOTguNy4zIDEzNiAyM2wxMDM0IDYzNGMzNy4zIDIyLjcgNTYgNTAuMyA1NiA4M3MtMTguNyA2MC4zLTU2IDgzTDEzNiAxNDU4Yy0zNy4zIDIyLjctNjkuMyAyNy44LTk2IDE1LjUtMjYuNy0xMi4zLTQwLTM4LjgtNDAtNzkuNXoiIGZpbGw9IiMwMDU5ZGQiLz48L3N2Zz4='); background-position: 58% 50%;background-size: 16px 20px;">
    </div>
    <div class="pause" style="background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNiIgaGVpZ2h0PSIyMCIgdmlld0JveD0iMCAwIDEyNjAgMTUxMiI+CjxwYXRoIGQ9Ik0yNTIgMEgxMjZDOTEuMyAwIDYxLjcgMTIuMyAzNyAzNyAxMi4zIDYxLjcgMCA5MS4zIDAgMTI2djEyNjBjMCAzNC43IDEyLjMgNjQuMyAzNyA4OSAyNC43IDI0LjcgNTQuMyAzNyA4OSAzN2gxMjZjMzQuNyAwIDY0LjMtMTIuMyA4OS0zNyAyNC43LTI0LjcgMzctNTQuMyAzNy04OVYxMjZjMC0zNC43LTEyLjMtNjQuMy0zNy04OS0yNC43LTI0LjctNTQuMy0zNy04OS0zN3ptODgyIDBoLTEyNmMtMzQuNyAwLTY0LjMgMTIuMy04OSAzNy0yNC43IDI0LjctMzcgNTQuMy0zNyA4OXYxMjYwYzAgMzQuNyAxMi4zIDY0LjMgMzcgODkgMjQuNyAyNC43IDU0LjMgMzcgODkgMzdoMTI2YzM0LjcgMCA2NC4zLTEyLjMgODktMzcgMjQuNy0yNC43IDM3LTU0LjMgMzctODlWMTI2YzAtMzQuNy0xMi4zLTY0LjMtMzctODktMjQuNy0yNC43LTU0LjMtMzctODktMzd6IiBmaWxsPSIjMDA1OWRkIi8+PC9zdmc+');background-position: 50%;background-size: 16px 20px;display: none;">
    </div>
  </div>
</div>

<audio id="player5" style="display:none;">
  <source src='http://hi5.1980s.fm/;' type='audio/mpeg'></source>
</audio>

It's an interesting problem, please checkout: https://stackoverflow.com/help/how-to-ask for ideas on how to make it more clear. What have you tried so far? Does this help? https://stackoverflow.com/questions/42874203/linear-gradient-across-svg-line — admcfajn, Nov 04 '17 at 08:00
So yeah, looks like you can just drop-in the markup for a linear-gradient inside that ` — admcfajn, Nov 04 '17 at 08:08
Couldn't you move the lines into their own svg element separate from the image and use absolute positioning to overlay them to be used along-side your css gradient? — admcfajn, Nov 04 '17 at 08:13
No, it's an interesting question, but it's 1am here and I've already coded for 9 hours today. — admcfajn, Nov 04 '17 at 08:20
Possible duplicate of [Putting linear-gradient over an image](https://stackoverflow.com/questions/47086437/putting-linear-gradient-over-an-image) — admcfajn, Nov 04 '17 at 08:33
That code won't work with this code, so it can't possibly be a duplicate. — , Nov 04 '17 at 08:43
Can you help me do this, it's less complicated. https://stackoverflow.com/questions/47107544/placing-svg-image-code-into-style — , Nov 04 '17 at 08:45
What I have an issue with is putting the gradient before the svg. — , Nov 04 '17 at 08:53
If it was a duplicate, that would have helped me with this and it doesn't. — , Nov 04 '17 at 09:01
Doing this doesn't work: "Looks like you can just drop-in the markup for a linear-gradient inside that — , Nov 04 '17 at 09:06

score 0 · Answer 1 · answered Nov 04 '17 at 07:52

0

Are they 3 separate objects or are the red and silver combined?

If they are 3 separate objects try using z-index

Gradient z index -1 Image z index -2

answered Nov 04 '17 at 07:52

iconic Oreo

19

score 0 · Answer 2 · edited Nov 04 '17 at 10:12

you have to create new svg elements to add two new lines after the image tag Click Here

<line style="stroke:#0059dd;stroke-width:3px;dysplay:block;" y2="200" x1="88"  x2="88"  y1="-60"></line>
<line style="stroke:#0059dd;stroke-width:3px;dysplay:block;" y2="200" x1="180" x2="180" y1="-60"></line>

#playButton5 {
    position: relative;
    width: 266px;
    height: 250px;
    cursor: pointer;
    background-color: #000000;
   /* background-image: linear-gradient( to right, transparent 0, transparent 86px, #0059dd 86px, #0059dd 89px, transparent 89px, transparent 177px, #0059dd 177px, #0059dd 180px, transparent 180px, transparent 266px);*/
    box-Shadow: inset 0 0 0 3px #0059dd;
    background-repeat: no-repeat;
  }

.initial {
    background-color: transparent;
 }

.initial line {
    stroke-width: 6;
    stroke: #f00; 
 }

.initial circle {
    stroke-width: 6;
    stroke: #f00; 
    fill: black;
 } 

  .button2 div {
    width: 44px;
    height: 44px;
    top: 102px;
    left: 116px;
    background-color: transparent;
    background-size: 14px 18px;
    background-repeat: no-repeat;
    border-radius: 50%;
    position: absolute;
  }

<div id="playButton5" onclick=" 
var button = document.getElementById('playButton5');
var player = document.getElementById('player5');
player.volume=1.0; if (player.paused) {
document.querySelector('#playButton5 .pause').style.display='inline-block';
document.querySelector('#playButton5 .play').style.display='none';
player.play();
} else {
document.querySelector('#playButton5 .pause').style.display='none';
document.querySelector('#playButton5 .play').style.display='inline-block';
player.pause();
}">

  <svg class="initial" width="266" height="250" viewbox="0 0 266 150">
<image x="0" y="-50" width="266" height="250" xlink:href="https://i.imgur.com/sVt3ks7.png" />
    <line style="stroke:#0059dd;stroke-width:3px;dysplay:block;" y2="200" x1="88" x2="88" y1="-60"></line>
    <line  style="stroke:#0059dd;stroke-width:3px;dysplay:block;" y2="200" x1="180" x2="180" y1="-60"></line>
    <line x1="6" y1="75" x2="32" y2="75" ></line>
    <line x1="39" y1="75" x2="111" y2="75" ></line>
    <line x1="86" y1="44" x2="192" y2="105" ></line>
    <line x1="137" y1="12" x2="137" y2="136" ></line>
    <line x1="86" y1="105" x2="192" y2="44" ></line>
    <line x1="152" y1="51" x2="188" y2="-12" ></line>
    <line x1="191" y1="-17" x2="205" y2="-40" ></line>
    <line x1="151" y1="98" x2="188" y2="161" ></line>
    <line x1="191" y1="166" x2="205" y2="188" ></line>
    <circle cx="138" cy="74" r="24.5"></circle>
  </svg>

  <div class="button2">
    <div class="play" style="background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNiIgaGVpZ2h0PSIyMCIgdmlld0JveD0iMCAwIDEyMjYgMTQ4MSI+CjxwYXRoIGQ9Ik0wIDEzOTRWODdDMCA0Ni4zIDEzLjMgMTkuOCA0MCA3LjUgNjYuNy00LjggOTguNy4zIDEzNiAyM2wxMDM0IDYzNGMzNy4zIDIyLjcgNTYgNTAuMyA1NiA4M3MtMTguNyA2MC4zLTU2IDgzTDEzNiAxNDU4Yy0zNy4zIDIyLjctNjkuMyAyNy44LTk2IDE1LjUtMjYuNy0xMi4zLTQwLTM4LjgtNDAtNzkuNXoiIGZpbGw9IiMwMDU5ZGQiLz48L3N2Zz4='); background-position: 58% 50%;background-size: 16px 20px;">
    </div>
    <div class="pause" style="background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNiIgaGVpZ2h0PSIyMCIgdmlld0JveD0iMCAwIDEyNjAgMTUxMiI+CjxwYXRoIGQ9Ik0yNTIgMEgxMjZDOTEuMyAwIDYxLjcgMTIuMyAzNyAzNyAxMi4zIDYxLjcgMCA5MS4zIDAgMTI2djEyNjBjMCAzNC43IDEyLjMgNjQuMyAzNyA4OSAyNC43IDI0LjcgNTQuMyAzNyA4OSAzN2gxMjZjMzQuNyAwIDY0LjMtMTIuMyA4OS0zNyAyNC43LTI0LjcgMzctNTQuMyAzNy04OVYxMjZjMC0zNC43LTEyLjMtNjQuMy0zNy04OS0yNC43LTI0LjctNTQuMy0zNy04OS0zN3ptODgyIDBoLTEyNmMtMzQuNyAwLTY0LjMgMTIuMy04OSAzNy0yNC43IDI0LjctMzcgNTQuMy0zNyA4OXYxMjYwYzAgMzQuNyAxMi4zIDY0LjMgMzcgODkgMjQuNyAyNC43IDU0LjMgMzcgODkgMzdoMTI2YzM0LjcgMCA2NC4zLTEyLjMgODktMzcgMjQuNy0yNC43IDM3LTU0LjMgMzctODlWMTI2YzAtMzQuNy0xMi4zLTY0LjMtMzctODktMjQuNy0yNC43LTU0LjMtMzctODktMzd6IiBmaWxsPSIjMDA1OWRkIi8+PC9zdmc+');background-position: 50%;background-size: 16px 20px;display: none;">
    </div>
  </div>
</div>

<audio id="player5" style="display:none;">
  <source src='http://hi5.1980s.fm/;' type='audio/mpeg'></source>
</audio>

You should turn your screenshot into a snippet to make it a valuable answer :) — G-Cyrillus, Nov 04 '17 at 10:03

Placing gradient over image, and before the SVG

2 Answers2

Linked