Skip to content Skip to sidebar Skip to footer

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

<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>

Post a Comment for "Placing Gradient Over Image, And Before The SVG"