Position of buttons besides image

Question

I have single image and 5 buttons, I would like to position the at the top-right side of the image, the buttons should be one above the other. currently the buttons are at bottom right side of the image and placed in a row.

function pictureChange(imgId, path) {
  document.getElementById(imgId).src = path;
}

p {
  display: inline-block;
}

<img id="scene1" src="images/scene1/scene1-4dof.png">

<p>
  <input type="button" value="4DOF" onclick="pictureChange('scene1','images/scene1/scene1-4dof.png')">
</p>
<p>
  <input type="button" value="6DOF" onclick="pictureChange('scene1','images/scene1/scene1-6dof.png')">
</p>
<p>
  <input type="button" value="6DOF-PCA" onclick="pictureChange('scene1','images/scene1/scene1-6dof-pca.png')">
</p>
<p>
  <input type="button" value="7DOF" onclick="pictureChange('scene1','images/scene1/scene1-7dof.png')">
</p>
<p>
  <input type="button" value="7DOF-PCA" onclick="pictureChange('scene1','images/scene1/scene1-7dof-pca.png')">
</p>

Answer 1

function pictureChange(imgId,path) {
  document.getElementById(imgId).src=path;
}

.img_con{
  width:400px;
  height:400px;
  position: relative;
}
.sid {
  position: absolute;

}

img {
  width:400px;
  height:400px;
}
.onTop{
  position: absolute;
  top:0;
  right: 0;
}
.sid input {
  display: block;
}

<div class="img_con">
  <img class="sid" id="scene1" src="http://via.placeholder.com/400x400">
  <div class="sid onTop">
    <input type="button" value="4DOF" onclick="pictureChange('scene1','images/scene1/scene1-4dof.png')">
    <input type="button" value="6DOF" onclick="pictureChange('scene1','images/scene1/scene1-6dof.png')">
    <input type="button" value="6DOF-PCA" onclick="pictureChange('scene1','images/scene1/scene1-6dof-pca.png')">
    <input type="button" value="7DOF" onclick="pictureChange('scene1','images/scene1/scene1-7dof.png')">
    <input type="button" value="7DOF-PCA" onclick="pictureChange('scene1','images/scene1/scene1-7dof-pca.png')">
  </div>
</div>

Answer 2

function pictureChange(imgId,path) {
  document.getElementById(imgId).src=path;
}

.sid {
  display: inline-block;
  vertical-align: top;
}

img {
  width:200px;
  height:200px;
}

.sid input {
  display: block;
}

<img class="sid" id="scene1" src="http://via.placeholder.com/200x200">
<!---->
<div class="sid">
  <input type="button" value="4DOF" onclick="pictureChange('scene1','images/scene1/scene1-4dof.png')">
  <input type="button" value="6DOF" onclick="pictureChange('scene1','images/scene1/scene1-6dof.png')">
  <input type="button" value="6DOF-PCA" onclick="pictureChange('scene1','images/scene1/scene1-6dof-pca.png')">
  <input type="button" value="7DOF" onclick="pictureChange('scene1','images/scene1/scene1-7dof.png')">
  <input type="button" value="7DOF-PCA" onclick="pictureChange('scene1','images/scene1/scene1-7dof-pca.png')">
</div>

What I did is add display: inline-block; to the image and the div 'i added to contain the inputs'

This <!----> for inline behaviour in inline-block ' shows any spacing between elements '

also vertical-align: top; for the top part of top-right

Answer 3

This solution will scale according to the surrounding element. To show this I added an extra wrapper.

.wrapper {
  position: relative; 
  /* width of the image here */
}
.wrapper .buttons {
  position: absolute;
  right: 3%;
  top: 3%;
}
#scene1 {
  width: 100%;
  height: auto;
}

<div class="wrapper">
  <img id="scene1" src="http://via.placeholder.com/350x150">
  <div class="buttons">
    <p><input type="button" value="4DOF" onclick="pictureChange('scene1','images/scene1/scene1-4dof.png')"></p>
    <p><input type="button" value="6DOF" onclick="pictureChange('scene1','images/scene1/scene1-6dof.png')"></p>
    <p><input type="button" value="6DOF-PCA" onclick="pictureChange('scene1','images/scene1/scene1-6dof-pca.png')"></p>
    <p><input type="button" value="7DOF" onclick="pictureChange('scene1','images/scene1/scene1-7dof.png')"></p>
    <p><input type="button" value="7DOF-PCA" onclick="pictureChange('scene1','images/scene1/scene1-7dof-pca.png')"></p>
  </div>
</div>

Answer 4

Pure Css :

1) Buttons on image:

div {
    position: relative;
    display: inline-block;
}

img {
    width:300px;
    border:1px solid #000;
}

.right {
    position: absolute;
    top: 0;
    right: 0;
    background-color: rgba(0,0,0,0.7);
    text-align: center;
}

<div>
<img id="scene1" src="http://justcuteanimals.com/wp-content/uploads/2016/10/baby-bear-pictures-cute-animal-pics.jpg">
<div class="right">
<p><input type="button" value="4DOF" onclick="pictureChange('scene1','images/scene1/scene1-4dof.png')"></p>
<p><input type="button" value="6DOF" onclick="pictureChange('scene1','images/scene1/scene1-6dof.png')"></p>
<p><input type="button" value="6DOF-PCA" onclick="pictureChange('scene1','images/scene1/scene1-6dof-pca.png')"></p>
<p><input type="button" value="7DOF" onclick="pictureChange('scene1','images/scene1/scene1-7dof.png')"></p>
<p><input type="button" value="7DOF-PCA" onclick="pictureChange('scene1','images/scene1/scene1-7dof-pca.png')"></p>
</div>
</div>

2) Buttons after image:

div {
    position: relative;
    display: inline-block;
}

img {
    width:200px;
    border:1px solid #000;
}

.right {
    background-color: rgba(0,0,0,0.7);
    text-align: center;
    vertical-align: top;

}

<div>
<img id="scene1" src="http://justcuteanimals.com/wp-content/uploads/2016/10/baby-bear-pictures-cute-animal-pics.jpg">
<div class="right">
<p><input type="button" value="4DOF" onclick="pictureChange('scene1','images/scene1/scene1-4dof.png')"></p>
<p><input type="button" value="6DOF" onclick="pictureChange('scene1','images/scene1/scene1-6dof.png')"></p>
<p><input type="button" value="6DOF-PCA" onclick="pictureChange('scene1','images/scene1/scene1-6dof-pca.png')"></p>
<p><input type="button" value="7DOF" onclick="pictureChange('scene1','images/scene1/scene1-7dof.png')"></p>
<p><input type="button" value="7DOF-PCA" onclick="pictureChange('scene1','images/scene1/scene1-7dof-pca.png')"></p>
</div>
</div>