Placing Gradient Over Image, And Before The Svg

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 th

Solution 1:

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

Solution 2:

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

<linestyle="stroke:#0059dd;stroke-width:3px;dysplay:block;"y2="200"x1="88"x2="88"y1="-60"></line><linestyle="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 0003px#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;
 } 

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

<divid="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();
}"><svgclass="initial"width="266"height="250"viewbox="0 0 266 150"><imagex="0"y="-50"width="266"height="250"xlink:href="https://i.imgur.com/sVt3ks7.png" /><linestyle="stroke:#0059dd;stroke-width:3px;dysplay:block;"y2="200"x1="88"x2="88"y1="-60"></line><linestyle="stroke:#0059dd;stroke-width:3px;dysplay:block;"y2="200"x1="180"x2="180"y1="-60"></line><linex1="6"y1="75"x2="32"y2="75" ></line><linex1="39"y1="75"x2="111"y2="75" ></line><linex1="86"y1="44"x2="192"y2="105" ></line><linex1="137"y1="12"x2="137"y2="136" ></line><linex1="86"y1="105"x2="192"y2="44" ></line><linex1="152"y1="51"x2="188"y2="-12" ></line><linex1="191"y1="-17"x2="205"y2="-40" ></line><linex1="151"y1="98"x2="188"y2="161" ></line><linex1="191"y1="166"x2="205"y2="188" ></line><circlecx="138"cy="74"r="24.5"></circle></svg><divclass="button2"><divclass="play"style="background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNiIgaGVpZ2h0PSIyMCIgdmlld0JveD0iMCAwIDEyMjYgMTQ4MSI+CjxwYXRoIGQ9Ik0wIDEzOTRWODdDMCA0Ni4zIDEzLjMgMTkuOCA0MCA3LjUgNjYuNy00LjggOTguNy4zIDEzNiAyM2wxMDM0IDYzNGMzNy4zIDIyLjcgNTYgNTAuMyA1NiA4M3MtMTguNyA2MC4zLTU2IDgzTDEzNiAxNDU4Yy0zNy4zIDIyLjctNjkuMyAyNy44LTk2IDE1LjUtMjYuNy0xMi4zLTQwLTM4LjgtNDAtNzkuNXoiIGZpbGw9IiMwMDU5ZGQiLz48L3N2Zz4='); background-position: 58% 50%;background-size: 16px 20px;"></div><divclass="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><audioid="player5"style="display:none;"><sourcesrc='http://hi5.1980s.fm/;'type='audio/mpeg'></source></audio>