@asasass posted a new topic, subject "Aligning multiple images". It read:

   What I'm trying to do is.
    
    **1st.)** Center the image in the middle.  
    **2nd.)** Place the linear-gradient over the image.
    
    https://jsfiddle.net/j3wng0po/1
    [code] 
        <style>
        
          .button div{ width:37px;height: 37px;
            margin: 70px 72px;
            background-color:black;
            background-size: 14px 18px;
            background-repeat: no-repeat;
            border-radius: 50%;
            box-Shadow:inset 0 0 0 3px lime;
            position:relative;
          } 
        </style>
        
        <div id="playButton2" style="position:relative;background-image: linear-gradient( to right,transparent 86px,#0059dd 86px, #0059dd 89px, transparent 89px, transparent  177px, #0059dd 177px, #0059dd 180px, transparent 180px );border: 3px solid #0059dd; width: 266px; height: 180px;cursor: pointer;" onclick=" 
        var button = document.getElementById('playButton2');
        var player = document.getElementById('player2');
        button.querySelector('.play').style.display='none';
        button.querySelector('.pause').style.display='none';
        player.volume=1.0; if (player.paused) {
        button.querySelector('.pause').style.display='inline-block';
        player.play();
        } else {
        button.querySelector('.play').style.display='inline-block';
        player.pause();
        }">
        
            <svg width="180" height="180" style="position: absolute;">
        
          <defs>
                <clippath id="circleView">
              <circle cx="90" cy="90" r="85" fill="orange" />
                </circle></clippath>
            </defs>
        
        <image width="180" height="180" xlink:href="https://i.imgur.com/uuqDlZB.jpg" clip-path="url(#circleView)" />
        
           <image width="180" height="180" xlink:href="http://i.imgur.com/4HJbzEq.png" /></image></svg>
        
            <div class="button" >
                <div class="play" style="background-image: url('https://i.imgur.com/Lj57czy.png'); background-position: 58% 50%;"> </div>
                <div class="pause" style="background-image: url('https://i.imgur.com/LgmfKda.png');background-position: 50%;display: none;"> </div>
                
            </div>
        
        </div>
        
        <audio id="player2" style="display:none;">
          <source src='http://hi5.1980s.fm/;' type='audio/mpeg'></source>
        </audio>
        
    [/code]

Then @asasass said

    I think I'm going to need to convert this into SVG Gradient, but I have no idea how to do that.
    
    `<div id="playButton2" style="background-image: linear-gradient( to right,black 86px,#0059dd 86px, #0059dd 89px, black 89px, black 177px, #0059dd 177px, #0059dd 180px, black 180px );width: 260px; height: 180px;"</div>`
    
    I don't know how to do this:
    [code] 
        <svg width="260" height="180" ">
            <defs>
                <linearGradient id="MyGradient">
                    <stop offset="5%"  stop-color="green"/>
                    <stop offset="95%" stop-color="gold"/>
                </linearGradient>
            </defs>
        
            <rect fill="url(#MyGradient)"
                  x="10" y="10" width="260" height="180"/>
        </svg>
        
    [/code]

Then @asasass said

    **1.)** When you convert Linear-Gradient to SVG gradient, should it look exactly the same?
    
    **2.)** Also, how come I have to give it a -10px margin, why is that required?
    
    **3.)** Also, how come when I put width 260px, it's only 250px on the screen?
    
    https://jsfiddle.net/095k7kyo/
    [code] 
        <svg width="260" height="180" style="margin:-10px;">
            <defs>
                <linearGradient id="MyGradient">
                    <stop offset="5%"  stop-color="green"/>
                    <stop offset="95%" stop-color="gold"/>
                </linearGradient>
            </defs>
        
            <rect fill="url(#MyGradient)"
                  x="10" y="10" width="260" height="180"/>
        </svg>
        
    [/code]

To which @asasass replied

    The line is too skinny, it should be 3px, not 2px.
    
    I got this far and now I'm stuck.  
    https://jsfiddle.net/c2qpca52/2/
    [code] 
          <svg width="260" height="180">
            <defs>
              <linearGradient id="MyGradient">
                <stop offset="33%" stop-color="black" />
                <stop offset="33%" stop-color="blue" />
                <stop offset="34%" stop-color="blue" />
                <stop offset="34%" stop-color="black" />
        
        
              </linearGradient>
            </defs>
        
            <rect fill="url(#MyGradient)" x="0" y="0" width="260" height="180" />
          </svg>
        
    [/code]

So @asasass replied

    I got up this far and they don't look the same to me.  
    https://jsfiddle.net/c2qpca52/4/
    [code] 
          <svg width="260" height="180">
            <defs>
              <linearGradient id="MyGradient">
                <stop offset="33%" stop-color="black" />
                <stop offset="33%" stop-color="#0059dd" />
                <stop offset="34%" stop-color="#0059dd" />
                <stop offset="35%" stop-color="black" />
                <stop offset="68%" stop-color="black" />
                <stop offset="68%" stop-color="#0059dd" />
                <stop offset="69%" stop-color="#0059dd" />
                <stop offset="70%" stop-color="black" />
        
              </linearGradient>
            </defs>
        
            <rect fill="url(#MyGradient)" x="0" y="0" width="260" height="180" />
          </svg>
        
    [/code]

Then @asasass said

    Can someone tell me if I did this correctly.  
    https://jsfiddle.net/onpx7tmj/
    [code] 
          <svg width="260" height="180">
            <defs>
              <linearGradient id="MyGradient">
                <stop offset="33%" stop-color="black" />
                <stop offset="33%" stop-color="#0059dd" />
                <stop offset="34.2%" stop-color="#0059dd" />
                <stop offset="34.2%" stop-color="black" />
                <stop offset="68%" stop-color="black" />
                <stop offset="68%" stop-color="#0059dd" />
                <stop offset="69.2%" stop-color="#0059dd" />
                <stop offset="69.2%" stop-color="black" />
        
              </linearGradient>
            </defs>
        
            <rect fill="url(#MyGradient)" x="0" y="0" width="260" height="180" />
          </svg>
        
    [/code]

@asasass replied

    I'm up to moving it to the middle.  
    https://jsfiddle.net/onpx7tmj/11/
    
    I'm trying to move the circle image into the middle without touching everything else. Meaning, if I use margin, then the linear gradient moves, breaks away with the circle image.
    
    This is what I mean by, if I move the circle, the linear-gradient moves with it.  
    https://jsfiddle.net/onpx7tmj/13/
    [code] 
        <style>
          .button div {
            width: 38px;
            height: 38px;
            top: 69px;
            left: 71px;
            background-color: black;
            background-size: 14px 18px;
            background-repeat: no-repeat;
            border-radius: 50%;
            box-Shadow: inset 0 0 0 2px lime;
            position: absolute;
          }
        
        </style>
        
        <div id="playButton2" style="position:relative;border: 3px solid #0059dd;background-color:black;width: 260px; height: 260px;cursor: pointer;" onclick=" 
        var button = document.getElementById('playButton2');
        var player = document.getElementById('player2');
        button.querySelector('.play').style.display='none';
        button.querySelector('.pause').style.display='none';
        player.volume=1.0; if (player.paused) {
        button.querySelector('.pause').style.display='inline-block';
        player.play();
        } else {
        button.querySelector('.play').style.display='inline-block';
        player.pause();
        }">
        
          <svg width="260" height="260" style="position: absolute; ">
        
            <defs>
              <clipPath id="circleView">
                <circle cx="90" cy="90" r="85" fill="orange" />
              </clipPath>
            </defs>
        
            <image width="180" height="180" xlink:href="https://i.imgur.com/uuqDlZB.jpg" clip-path="url(#circleView)" />
        
            <image width="180" height="180" xlink:href="http://i.imgur.com/4HJbzEq.png" />
        
            <svg width="260" height="260">
              <defs>
                <linearGradient id="MyGradient">
                  <stop offset="0%" stop-color="transparent" />
                  <stop offset="33%" stop-color="transparent" />
                  <stop offset="33%" stop-color="#0059dd" />
                  <stop offset="34.2%" stop-color="#0059dd" />
                  <stop offset="34.2%" stop-color="transparent" />
                  <stop offset="68%" stop-color="transparent" />
                  <stop offset="68%" stop-color="#0059dd" />
                  <stop offset="69.2%" stop-color="#0059dd" />
                  <stop offset="69.2%" stop-color="transparent" />
                  <stop offset="102%" stop-color="transparent" />
                </linearGradient>
              </defs>
        
              <rect fill="url(#MyGradient)" x="0" y="0" width="260" height="260" />
        
            </svg>
        
          </svg>
        
        
        
          <div class="button">
            <div class="play" style="background-image: url('https://i.imgur.com/Lj57czy.png'); background-position: 58% 50%;"> </div>
            <div class="pause" style="background-image: url('https://i.imgur.com/LgmfKda.png');background-position: 50%;display: none;"> </div>
        
          </div>
        
        </div>
        
        <audio id="player2" style="display:none;">
          <source src='http://hi5.1980s.fm/;' type='audio/mpeg'>
        </audio>
        
    [/code]

After which, @asasass added

    Done.
    
    https://jsfiddle.net/f7u38uds/
    [code] 
        <style>
          .button div {
            width: 38px;
            height: 38px;
            top: 109px;
            left: 111px;
            background-color: black;
            background-size: 14px 18px;
            background-repeat: no-repeat;
            border-radius: 50%;
            box-Shadow: inset 0 0 0 2px lime;
            position: absolute;
          }
          
          image {
            transform: translate(40px, 40px);
          }
        
        </style>
        
        <div id="playButton2" style="position:relative;border: 3px solid #0059dd;background-color:black;width: 260px; height: 260px;cursor: pointer;" onclick=" 
        var button = document.getElementById('playButton2');
        var player = document.getElementById('player2');
        button.querySelector('.play').style.display='none';
        button.querySelector('.pause').style.display='none';
        player.volume=1.0; if (player.paused) {
        button.querySelector('.pause').style.display='inline-block';
        player.play();
        } else {
        button.querySelector('.play').style.display='inline-block';
        player.pause();
        }">
        
          <svg width="260" height="260" style="position: absolute; ">
        
            <defs>
              <clipPath id="circleView">
                <circle cx="90" cy="90" r="85" fill="orange" />
              </clipPath>
            </defs>
        
            <image width="180" height="180" xlink:href="https://i.imgur.com/uuqDlZB.jpg" clip-path="url(#circleView)" />
        
            <image width="180" height="180" xlink:href="http://i.imgur.com/4HJbzEq.png" />
        
            <svg width="260" height="260">
              <defs>
                <linearGradient id="MyGradient">
                  <stop offset="0%" stop-color="transparent" />
                  <stop offset="33%" stop-color="transparent" />
                  <stop offset="33%" stop-color="#0059dd" />
                  <stop offset="34.2%" stop-color="#0059dd" />
                  <stop offset="34.2%" stop-color="transparent" />
                  <stop offset="68%" stop-color="transparent" />
                  <stop offset="68%" stop-color="#0059dd" />
                  <stop offset="69.2%" stop-color="#0059dd" />
                  <stop offset="69.2%" stop-color="transparent" />
                  <stop offset="102%" stop-color="transparent" />
                </linearGradient>
              </defs>
        
              <rect fill="url(#MyGradient)" x="0" y="0" width="260" height="260" />
        
            </svg>
        
          </svg>
        
        
        
          <div class="button">
            <div class="play" style="background-image: url('https://i.imgur.com/Lj57czy.png'); background-position: 58% 50%;"> </div>
            <div class="pause" style="background-image: url('https://i.imgur.com/LgmfKda.png');background-position: 50%;display: none;"> </div>
        
          </div>
        
        </div>
        
        <audio id="player2" style="display:none;">
          <source src='http://hi5.1980s.fm/;' type='audio/mpeg'>
        </audio>
        
    [/code]

To which @asasass replied

    I have an issue.
    
    transform: translate(40px, 40px);
    
    Doesn't work in internet explorer 11, which means it doesn't work across browsers.  
    https://testpage34567.blogspot.com/
    
    Should I be worried about this or not?
    
    Is there perhaps something that I can use that will work across all browsers?

Then @asasass said

    I was told this,
    
    `-ms-transform: translate(40px, 40px);`
    
    But that doesn't seem to work.

@PaulOB replied

    asasass:
    
    > I have an issue.
    > 
    > transform: translate(40px, 40px);
    > 
    > Doesn't work in internet explorer 11,
    
    `transform: translate(40px, 40px)` works fine in IE11.
    
    Where on that page do you have that rule?
    
    I can't see it anywhere but I shouldn't have to sort through your code to find it. List the actual rule that contains that transform rule.
    
    Also you show an image in your post. Is that the way you want it to look or is that the version that is wrong? Please take time to compose your questions properly and you will get better help.

@asasass replied

    Here, it's up **Live** now.  
    https://testpage34567.blogspot.com/
    
    **Code 2**  
    I was told this, but it doesn't seem to work.
    
    > For full compatibility with IE/Edge it gets a bit more complicated. CSS transforms are not supported for SVG elements, and the SVG presentation attributes do not support the CSS calc() function. Change your markup instead.
    [code] 
        <defs>
          <clipPath id="circleView">
            <circle cx="50%" cy="50%" r="85" transform="translate(90 90)" fill="orange" />
          </clipPath>
        </defs>
        
        <image width="180" height="180" x="50%" y="50%" transform="translate(-90 -90)"
               xlink:href="https://i.imgur.com/uuqDlZB.jpg" clip-path="url(#circleView)" />
        
        <image width="180" height="180" x="50%" y="50%" transform="translate(-90 -90)"
               xlink:href="http://i.imgur.com/4HJbzEq.png" />
        
    [/code]
    
    **Code 1**
    
    Uses:
    [code] 
          image {
            transform: translate(40px, 40px);
            -ms-transform: translate(40px, 40px);
          }
        
    [/code]
    [code] 
        <style>
          .button div {
            width: 38px;
            height: 38px;
            top: 109px;
            left: 111px;
            background-color: black;
            background-size: 14px 18px;
            background-repeat: no-repeat;
            border-radius: 50%;
            box-Shadow: inset 0 0 0 2px lime;
            position: absolute;
          }
          
          image {
            transform: translate(40px, 40px);
            -ms-transform: translate(40px, 40px);
          }
        
        </style>
        
        <div id="playButton2" style="position:relative;border: 3px solid #0059dd;background-color:black;width: 260px; height: 260px;cursor: pointer;" onclick=" 
        var button = document.getElementById('playButton2');
        var player = document.getElementById('player2');
        button.querySelector('.play').style.display='none';
        button.querySelector('.pause').style.display='none';
        player.volume=1.0; if (player.paused) {
        button.querySelector('.pause').style.display='inline-block';
        player.play();
        } else {
        button.querySelector('.play').style.display='inline-block';
        player.pause();
        }">
        
          <svg width="260" height="260" style="position: absolute; ">
        
            <defs>
              <clippath id="circleView">
                <circle cx="90" cy="90" r="85" fill="orange" />
              </circle></clippath>
            </defs>
        
            <image width="180" height="180" xlink:href="https://i.imgur.com/uuqDlZB.jpg" clip-path="url(#circleView)" />
        
            <image width="180" height="180" xlink:href="http://i.imgur.com/4HJbzEq.png" />
        
            <svg width="260" height="260">
              <defs>
                <lineargradient id="MyGradient">
                  <stop offset="0%" stop-color="transparent" />
                  <stop offset="33%" stop-color="transparent" />
                  <stop offset="33%" stop-color="#0059dd" />
                  <stop offset="34.2%" stop-color="#0059dd" />
                  <stop offset="34.2%" stop-color="transparent" />
                  <stop offset="68%" stop-color="transparent" />
                  <stop offset="68%" stop-color="#0059dd" />
                  <stop offset="69.2%" stop-color="#0059dd" />
                  <stop offset="69.2%" stop-color="transparent" />
                  <stop offset="102%" stop-color="transparent" />
                </stop></stop></stop></stop></stop></stop></stop></stop></stop></stop></lineargradient>
              </defs>
        
              <rect fill="url(#MyGradient)" x="0" y="0" width="260" height="260" />
        
            </rect></svg>
        
          </image></image></svg>
        
        
        
          <div class="button">
            <div class="play" style="background-image: url('https://i.imgur.com/Lj57czy.png'); background-position: 58% 50%;"> </div>
            <div class="pause" style="background-image: url('https://i.imgur.com/LgmfKda.png');background-position: 50%;display: none;"> </div>
        
          </div>
        
        </div>
        
        <audio id="player2" style="display:none;">
          <source src='http://hi5.1980s.fm/;' type='audio/mpeg'>
        </source></audio>
        
    [/code]
    
    **Code 2**
    [code] 
        <style>
          .button div {
            width: 38px;
            height: 38px;
            top: 109px;
            left: 111px;
            background-color: black;
            background-size: 14px 18px;
            background-repeat: no-repeat;
            border-radius: 50%;
            box-Shadow: inset 0 0 0 2px lime;
            position: absolute;
          }
          
        
        </style>
        
        <div id="playButton8" style="position:relative;border: 3px solid #0059dd;background-color:black;width: 260px; height: 260px;cursor: pointer;" onclick=" 
        var button = document.getElementById('playButton8');
        var player = document.getElementById('player8');
        button.querySelector('.play').style.display='none';
        button.querySelector('.pause').style.display='none';
        player.volume=1.0; if (player.paused) {
        button.querySelector('.pause').style.display='inline-block';
        player.play();
        } else {
        button.querySelector('.play').style.display='inline-block';
        player.pause();
        }">
        
          <svg width="260" height="260" style="position: absolute; ">
        
            <defs>
              <clippath id="circleView">
                <circle cx="50%" cy="50%" r="85" transform="translate(90 90)" fill="orange" />
              </circle></clippath>
            </defs>
        
            <image width="180" height="180" x="50%" y="50%" transform="translate(-90 -90)" xlink:href="https://i.imgur.com/uuqDlZB.jpg" clip-path="url(#circleView)" />
        
            <image width="180" height="180" x="50%" y="50%" transform="translate(-90 -90)" xlink:href="http://i.imgur.com/4HJbzEq.png" />
        
            <svg width="260" height="260">
              <defs>
                <lineargradient id="MyGradient">
                  <stop offset="0%" stop-color="transparent" />
                  <stop offset="33%" stop-color="transparent" />
                  <stop offset="33%" stop-color="#0059dd" />
                  <stop offset="34.2%" stop-color="#0059dd" />
                  <stop offset="34.2%" stop-color="transparent" />
                  <stop offset="68%" stop-color="transparent" />
                  <stop offset="68%" stop-color="#0059dd" />
                  <stop offset="69.2%" stop-color="#0059dd" />
                  <stop offset="69.2%" stop-color="transparent" />
                  <stop offset="102%" stop-color="transparent" />
                </stop></stop></stop></stop></stop></stop></stop></stop></stop></stop></lineargradient>
              </defs>
        
              <rect fill="url(#MyGradient)" x="0" y="0" width="260" height="260" />
        
            </rect></svg>
        
          </image></image></svg>
        
        
        
          <div class="button">
            <div class="play" style="background-image: url('https://i.imgur.com/Lj57czy.png'); background-position: 58% 50%;"> </div>
            <div class="pause" style="background-image: url('https://i.imgur.com/LgmfKda.png');background-position: 50%;display: none;"> </div>
        
          </div>
        
        </div>
        
        <audio id="player8" style="display:none;">
          <source src='http://hi5.1980s.fm/;' type='audio/mpeg'>
        </source></audio>
        
    [/code]

@chrisofarabia replied

    asasass:
    
    > For full compatibility with IE/Edge it gets a bit more complicated. CSS transforms are not supported for SVG elements, and the SVG presentation attributes do not support the CSS calc() function. Change your markup instead:
    
    Is this part a quote from somewhere? It would be worth using the quote tool if so.

After which, @asasass added

    I was told that from here:  
    https://stackoverflow.com/a/47026822/8769005

Then @asasass said

    Just did it. I used the quote tool.
    
    Stand by. I have images coming.

After which, @asasass added

    https://jsfiddle.net/zuwuu9s4/4/
    
    **How it looks in firefox**  
    
    
    **How it looks in internet explorer 11**

So @PaulOB replied

    asasass:
    
    > <defs>  
    >  <clipPath id=“circleView”>  
    >  <circle cx=“50%” cy=“50%” r=“85” transform=“translate(90 90)” fill=“orange” />  
    >  </clipPath>  
    >  </defs>
    > 
    > <image width=“180” height=“180” x=“50%” y=“50%” transform=“translate(-90 -90)”  
    >  xlink:href=“https://i.imgur.com/uuqDlZB.jpg” clip-path=“url(#circleView)” />
    > 
    > <image width=“180” height=“180” x=“50%” y=“50%” transform=“translate(-90 -90)”  
    >  xlink:href=“http://i.imgur.com/4HJbzEq.png” />
    
    Finally!!!
    
    You are talking about applying transforms to the image element of an svg which is a different kettle of fish and likely does have a myriad of browser limitations.
    
    It looks you are being told to change the svg mark up instead of using css which I assume is to set the co-ordinates of the element ( x=“40” y=“40”).
    
    e.g.  
    `<circle cx="130" cy="130" r="85" fill="orange" />`
    
    and
    [code] 
        <image x="40" y="40"  width="180" height="180" xlink:href="https://i.imgur.com/uuqDlZB.jpg" clip-path="url(#circleView)" />
         <image x="40" y="40" width="180" height="180" xlink:href="http://i.imgur.com/4HJbzEq.png" />
        
    [/code]
    [code] 
         <defs>
                                          <clippath id="circleView">
                                            <circle  cx="130" cy="130" r="85" fill="orange" />
                                            </circle>
                                          </clippath>
                                        </defs>
                                        <image x="40" y="40"  width="180" height="180" xlink:href="https://i.imgur.com/uuqDlZB.jpg" clip-path="url(#circleView)" />
                                        <image x="40" y="40" width="180" height="180" xlink:href="http://i.imgur.com/4HJbzEq.png" />
        
    [/code]
    
    I know nothing of svg so someone else will have to step in if the above is not correct.

Then @asasass said

    **Code 3 firefox**  
    
    
    **Code 3 internet explorer 11**  
    
    
    https://testpage34567.blogspot.com/

To which @PaulOB replied

    Did you remove the translate and did you apply all the changes I listed or were those 2 images meant to tell us something else?

@asasass replied

    Yes, and Yes.
    
    That's what **Code 3** is.
    
    I made all the changes you told me to do.
    [code] 
        <style>
          .button div {
            width: 38px;
            height: 38px;
            top: 109px;
            left: 111px;
            background-color: black;
            background-size: 14px 18px;
            background-repeat: no-repeat;
            border-radius: 50%;
            box-Shadow: inset 0 0 0 2px lime;
            position: absolute;
          }
          
        
        </style>
        
        <div id="playButton7" style="position:relative;border: 3px solid #0059dd;background-color:black;width: 260px; height: 260px;cursor: pointer;" onclick=" 
        var button = document.getElementById('playButton7');
        var player = document.getElementById('player7');
        button.querySelector('.play').style.display='none';
        button.querySelector('.pause').style.display='none';
        player.volume=1.0; if (player.paused) {
        button.querySelector('.pause').style.display='inline-block';
        player.play();
        } else {
        button.querySelector('.play').style.display='inline-block';
        player.pause();
        }">
        
          <svg width="260" height="260">
         <defs>
                                          <clippath id="circleView">
                                            <circle  cx="130" cy="130" r="85" fill="orange" />
                                            </circle>
                                          </clippath>
                                        </defs>
                                        <image x="40" y="40"  width="180" height="180" xlink:href="https://i.imgur.com/uuqDlZB.jpg" clip-path="url(#circleView)" />
                                        <image x="40" y="40" width="180" height="180" xlink:href="http://i.imgur.com/4HJbzEq.png" />
        
            <svg width="260" height="260">
              <defs>
                <lineargradient id="MyGradient">
                  <stop offset="0%" stop-color="transparent" />
                  <stop offset="33%" stop-color="transparent" />
                  <stop offset="33%" stop-color="#0059dd" />
                  <stop offset="34.2%" stop-color="#0059dd" />
                  <stop offset="34.2%" stop-color="transparent" />
                  <stop offset="68%" stop-color="transparent" />
                  <stop offset="68%" stop-color="#0059dd" />
                  <stop offset="69.2%" stop-color="#0059dd" />
                  <stop offset="69.2%" stop-color="transparent" />
                  <stop offset="102%" stop-color="transparent" />
                </stop></stop></stop></stop></stop></stop></stop></stop></stop></stop></lineargradient>
              </defs>
        
              <rect fill="url(#MyGradient)" x="0" y="0" width="260" height="260" />
        
            </rect></svg>
        
          </image></image></svg>
        
        
        
          <div class="button">
            <div class="play" style="background-image: url('https://i.imgur.com/Lj57czy.png'); background-position: 58% 50%;"> </div>
            <div class="pause" style="background-image: url('https://i.imgur.com/LgmfKda.png');background-position: 50%;display: none;"> </div>
        
          </div>
        
        </div>
        
        <audio id="player7" style="display:none;">
          <source src='http://hi5.1980s.fm/' type='audio/mpeg'>
        </source></audio>
        
    [/code]

After which, @TechnoBear added

    If I copy and paste that code into an HTML document, it displays just fine for me on Firefox 56.

@PaulOB replied

    TechnoBear:
    
    > If I copy and paste that code into an HTML document, it displays just fine for me on Firefox 56.
    
    And it looks the same in IE11 also.
    
    asasass:
    
    > Yes, and Yes.
    
    No and No.
    
    Look again you still have transform :translate rules applying to all image elements (twice in fact).
    
    I suggest you build your demos one item at a time as you don't seem to know how to isolate code yet. Your multiple examples are using common rules and making it hard for you to test.

@asasass replied

    The ‘word' Translate isn't mentioned in here, which is **Code 3**. So I don't understand what you mean.
    
    And if you're talking about:
    [code] 
        background-position: 58% 50%;
        background-position: 50%;
        
    [/code]
    
    I need those in to position the play buttons.
    
    Can you be more specific?
    [code] 
        <style>
          .button div {
            width: 38px;
            height: 38px;
            top: 109px;
            left: 111px;
            background-color: black;
            background-size: 14px 18px;
            background-repeat: no-repeat;
            border-radius: 50%;
            box-Shadow: inset 0 0 0 2px lime;
            position: absolute;
          }
          
        
        </style>
        
        <div id="playButton7" style="position:relative;border: 3px solid #0059dd;background-color:black;width: 260px; height: 260px;cursor: pointer;" onclick=" 
        var button = document.getElementById('playButton7');
        var player = document.getElementById('player7');
        button.querySelector('.play').style.display='none';
        button.querySelector('.pause').style.display='none';
        player.volume=1.0; if (player.paused) {
        button.querySelector('.pause').style.display='inline-block';
        player.play();
        } else {
        button.querySelector('.play').style.display='inline-block';
        player.pause();
        }">
        
          <svg width="260" height="260">
         <defs>
                                          <clippath id="circleView">
                                            <circle  cx="130" cy="130" r="85" fill="orange" />
                                            </circle>
                                          </clippath>
                                        </defs>
                                        <image x="40" y="40"  width="180" height="180" xlink:href="https://i.imgur.com/uuqDlZB.jpg" clip-path="url(#circleView)" />
                                        <image x="40" y="40" width="180" height="180" xlink:href="http://i.imgur.com/4HJbzEq.png" />
        
            <svg width="260" height="260">
              <defs>
                <lineargradient id="MyGradient">
                  <stop offset="0%" stop-color="transparent" />
                  <stop offset="33%" stop-color="transparent" />
                  <stop offset="33%" stop-color="#0059dd" />
                  <stop offset="34.2%" stop-color="#0059dd" />
                  <stop offset="34.2%" stop-color="transparent" />
                  <stop offset="68%" stop-color="transparent" />
                  <stop offset="68%" stop-color="#0059dd" />
                  <stop offset="69.2%" stop-color="#0059dd" />
                  <stop offset="69.2%" stop-color="transparent" />
                  <stop offset="102%" stop-color="transparent" />
                </stop></stop></stop></stop></stop></stop></stop></stop></stop></stop></lineargradient>
              </defs>
        
              <rect fill="url(#MyGradient)" x="0" y="0" width="260" height="260" />
        
            </rect></svg>
        
          </image></image></svg>
        
        
        
          <div class="button">
            <div class="play" style="background-image: url('https://i.imgur.com/Lj57czy.png'); background-position: 58% 50%;"> </div>
            <div class="pause" style="background-image: url('https://i.imgur.com/LgmfKda.png');background-position: 50%;display: none;"> </div>
        
          </div>
        
        </div>
        
        <audio id="player7" style="display:none;">
          <source src='http://hi5.1980s.fm/' type='audio/mpeg'>
        </source></audio>
        
    [/code]

@TechnoBear replied

    asasass:
    
    > The ‘word' Translate isn't mentioned in here, which is Code 3.
    
    No, but on your Blogger page, it is mentioned in code 1 and code 2, Those styles will apply to all elements further down the page which match. Hence @PaulOB's suggestion that you build just one demo at a time to avoid such conflicts.

So @asasass replied

    Really? Why is that, if the playbuttons are each different numbers?

Then @TechnoBear said

    Your code says:
    [code] 
          image {
            transform: translate(40px, 40px);
            -ms-transform: translate(40px, 40px);
        
    [/code]
    
    Those rules will apply to _any_ image tag which appears after them on the page. If you want to ensure that they only apply to the images in one set of code, then you will need to give those images a class you can target more specifically.

After which, @asasass added

    You were right. Thank you.

Then @asasass said

    A new one.  
    https://testing45435.blogspot.com/

After which, @asasass added

    Now I know to test codes separately, and not all together.

Then @asasass said

    I think I'll forget about blogger and test as a standalone code via .html first, before I test it on blogger.
    
    This way I'll know if the code is right, before I make any further adjustments.

After which, @TechnoBear added

    I think that's a very wise decision.

So @asasass replied

    Thanks for bringing this to my attention.

After which, @asasass added

    Both these codes work, so which is more preferable to use?
    
    **Code 2**  
    https://jsfiddle.net/snu071jj/5/
    [code] 
        <style>
          .button div {
            width: 38px;
            height: 38px;
            top: 109px;
            left: 111px;
            background-color: black;
            background-size: 14px 18px;
            background-repeat: no-repeat;
            border-radius: 50%;
            box-Shadow: inset 0 0 0 2px lime;
            position: absolute;
          }
        
        </style>
        
        <div id="playButton8" style="position:relative;border: 3px solid #0059dd;background-color:black;width: 260px; height: 260px;cursor: pointer;" onclick=" 
        var button = document.getElementById('playButton8');
        var player = document.getElementById('player8');
        button.querySelector('.play').style.display='none';
        button.querySelector('.pause').style.display='none';
        player.volume=1.0; if (player.paused) {
        button.querySelector('.pause').style.display='inline-block';
        player.play();
        } else {
        button.querySelector('.play').style.display='inline-block';
        player.pause();
        }">
        
          <svg width="260" height="260" style="position: absolute; ">
        
            <defs>
              <clippath id="circleView">
                <circle cx="50%" cy="50%" r="85" transform="translate(90 90)" fill="orange" />
              </clippath>
            </defs>
        
            <image width="180" height="180" x="50%" y="50%" transform="translate(-90 -90)" xlink:href="https://i.imgur.com/uuqDlZB.jpg" clip-path="url(#circleView)" />
        
            <image width="180" height="180" x="50%" y="50%" transform="translate(-90 -90)" xlink:href="http://i.imgur.com/4HJbzEq.png" />
        
            <svg width="260" height="260">
              <defs>
                <lineargradient id="MyGradient">
                  <stop offset="0%" stop-color="transparent" />
                  <stop offset="33%" stop-color="transparent" />
                  <stop offset="33%" stop-color="#0059dd" />
                  <stop offset="34.2%" stop-color="#0059dd" />
                  <stop offset="34.2%" stop-color="transparent" />
                  <stop offset="68%" stop-color="transparent" />
                  <stop offset="68%" stop-color="#0059dd" />
                  <stop offset="69.2%" stop-color="#0059dd" />
                  <stop offset="69.2%" stop-color="transparent" />
                  <stop offset="102%" stop-color="transparent" />
                </lineargradient>
              </defs>
        
              <rect fill="url(#MyGradient)" x="0" y="0" width="260" height="260" />
        
            </svg>
        
          </svg>
        
          <div class="button">
            <div class="play" style="background-image: url('https://i.imgur.com/Lj57czy.png'); background-position: 58% 50%;"> </div>
            <div class="pause" style="background-image: url('https://i.imgur.com/LgmfKda.png');background-position: 50%;display: none;"> </div>
        
          </div>
        
        </div>
        
        <audio id="player8" style="display:none;">
          <source src='http://hi5.1980s.fm/' type='audio/mpeg'>
          <br/>
        
        
    [/code]
    
    **Code 3**  
    https://jsfiddle.net/3ppLd3cp/1/
    [code] 
        <style>
          .button div {
            width: 38px;
            height: 38px;
            top: 109px;
            left: 111px;
            background-color: black;
            background-size: 14px 18px;
            background-repeat: no-repeat;
            border-radius: 50%;
            box-Shadow: inset 0 0 0 2px lime;
            position: absolute;
          }
        
        </style>
        
        <div id="playButton7" style="position:relative;border: 3px solid #0059dd;background-color:black;width: 260px; height: 260px;cursor: pointer;" onclick=" 
        var button = document.getElementById('playButton7');
        var player = document.getElementById('player7');
        button.querySelector('.play').style.display='none';
        button.querySelector('.pause').style.display='none';
        player.volume=1.0; if (player.paused) {
        button.querySelector('.pause').style.display='inline-block';
        player.play();
        } else {
        button.querySelector('.play').style.display='inline-block';
        player.pause();
        }">
        
          <svg width="260" height="260">
            <defs>
              <clippath id="circleView">
                <circle cx="130" cy="130" r="85" fill="orange" />
              </clippath>
            </defs>
            <image x="40" y="40" width="180" height="180" xlink:href="https://i.imgur.com/uuqDlZB.jpg" clip-path="url(#circleView)" />
            <image x="40" y="40" width="180" height="180" xlink:href="http://i.imgur.com/4HJbzEq.png" />
        
            <svg width="260" height="260">
              <defs>
                <lineargradient id="MyGradient">
                  <stop offset="0%" stop-color="transparent" />
                  <stop offset="33%" stop-color="transparent" />
                  <stop offset="33%" stop-color="#0059dd" />
                  <stop offset="34.2%" stop-color="#0059dd" />
                  <stop offset="34.2%" stop-color="transparent" />
                  <stop offset="68%" stop-color="transparent" />
                  <stop offset="68%" stop-color="#0059dd" />
                  <stop offset="69.2%" stop-color="#0059dd" />
                  <stop offset="69.2%" stop-color="transparent" />
                  <stop offset="102%" stop-color="transparent" />
                </lineargradient>
              </defs>
        
              <rect fill="url(#MyGradient)" x="0" y="0" width="260" height="260" />
        
            </svg>
          </svg>
        
          <div class="button">
            <div class="play" style="background-image: url('https://i.imgur.com/Lj57czy.png'); background-position: 58% 50%;"> </div>
            <div class="pause" style="background-image: url('https://i.imgur.com/LgmfKda.png');background-position: 50%;display: none;"> </div>
        
          </div>
        </div>
        
        <audio id="player7" style="display:none;">
          <source src='http://hi5.1980s.fm/' type='audio/mpeg'>
        </audio>
        
        
    [/code]

Then @system said

    This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.


{'source': 'discourse', 'url': 'https://www.sitepoint.com/community/t/aligning-multiple-images/279576', 'title': 'Aligning multiple images', 'views': 4577, 'has_accepted_answer': False, 'word_count': 4599, 'like_count': 16, 'reply_count': 30, 'participant_count': 4, 'posts': 34, 'tags': '', 'author': '@asasass', 'participants': '@asasass, @PaulOB, @chrisofarabia, @TechnoBear, @system', 'image_url': ['https://aws1.discourse-cdn.com/sitepoint/original/3X/5/7/57b19a21e34b9c732273d596a41e658d2bd8ec44.png'], 'created_at': '2017-10-30T06:58:38.565Z', 'last_posted_at': '2018-02-01T01:32:22.870Z'}