Aligning multiple images

asasass · October 30, 2017, 6:58am

What I’m trying to do is.

1st.) Center the image in the middle.
2nd.) Place the linear-gradient over the image.

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

asasass · October 30, 2017, 7:28am

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:

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

asasass · October 30, 2017, 10:06pm

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?

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

asasass · October 30, 2017, 11:40pm

The line is too skinny, it should be 3px, not 2px.

I got this far and now I’m stuck.

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

asasass · October 31, 2017, 12:15am

I got up this far and they don’t look the same to me.

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

asasass · October 31, 2017, 12:24am

Can someone tell me if I did this correctly.

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

asasass · October 31, 2017, 12:50am

I’m up to moving it to the middle.

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.

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

asasass · October 31, 2017, 2:46am

Done.

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

asasass · October 31, 2017, 3:00am

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?

asasass · October 31, 2017, 9:09am

I was told this,

-ms-transform: translate(40px, 40px);

But that doesn’t seem to work.

PaulOB · October 31, 2017, 2:06pm

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 · October 31, 2017, 8:24pm

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.

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

Uses:


  image {
    transform: translate(40px, 40px);
    -ms-transform: translate(40px, 40px);
  }

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

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

chrisofarabia · October 31, 2017, 8:27pm

Is this part a quote from somewhere? It would be worth using the quote tool if so.

asasass · October 31, 2017, 8:28pm

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

asasass · October 31, 2017, 8:30pm

Just did it. I used the quote tool.

Stand by. I have images coming.

asasass · October 31, 2017, 8:36pm

How it looks in firefox

How it looks in internet explorer 11

PaulOB · October 31, 2017, 9:52pm

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

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

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

I know nothing of svg so someone else will have to step in if the above is not correct.

asasass · October 31, 2017, 11:16pm

Code 3 firefox

Code 3 internet explorer 11

https://testpage34567.blogspot.com/

PaulOB · November 1, 2017, 8:54am

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 · November 1, 2017, 9:00am

Yes, and Yes.

That’s what Code 3 is.

I made all the changes you told me to do.

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

Topic		Replies	Views
Putting linear-gradient over an image HTML & CSS	2	4260	February 2, 2018
If I were to put 2 of these on a page, it would look like JavaScript	114	4400	February 20, 2018
How would I reposition the 2 border lines in the middle of the linear-gradient? HTML & CSS	2	557	November 25, 2016
Placing 2 div side by side? HTML & CSS	11	6467	April 12, 2018
How would I connect the 2 images to the middle image? HTML & CSS	117	5541	May 11, 2017

Related topics