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>

Answer 1

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>

Answer 2

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